Viewport-fit: cover in Next 14 App Router
Answered
Border Terrier posted this in #help-forum
Border TerrierOP
Easy one. I'm trying to find the metadata setting to change the viewport width to cover and utlize the "safe area" on ios Safari devices. In react, I'd just add
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> Answered by joulev
Try
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
viewportFit: 'cover',
}4 Replies
Border TerrierOP
Visual example: "https://wpastra.com/docs/remove-white-bars-on-safari/"
@Border Terrier Easy one. I'm trying to find the metadata setting to change the viewport width to cover and utlize the "safe area" on ios Safari devices. In react, I'd just add <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> but without the index.html, I looked through the Next.js docs for a solution, to no avail. Anybody have experience with this?
Try
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
viewportFit: 'cover',
}Answer
Does it work? If not you can simply add the <meta> tag above directly to the page
Border TerrierOP
hell yeah. Thank you!