Is there any way to configure Docusaurus v2 to use the safe-area for mobile phone? I'd like to stretch a footer and header in landscape-mode to avoid the white bars on iPhones etc.
In pure HTML this typically requires modifying viewport meta-tag to also specify viewport-fit=cover and applying the required padding etc in CSS to avoid conflicts with camera, menubar etc.
In Docusaurus-docs I only see modifying ssrTemplate as an option, but that feels very complex (and additional maintenance?) just to modify a hardcoded meta-tag. I tried the following, but it creates a duplicate meta-tag instead of updating it.
themeConfig: {
metadata: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, viewport-fit=cover'
}
]
}
Docusaurus v2.1.0 makes viewport meta-tag customizable through themeConfig (shown in question) and through plugins.
See https://docusaurus.io/blog/2022/09/01/docusaurus-2.1#overriding-default-meta-tags