Kevin Powell - Community•16mo ago

Background-Color won’t cover iPhone notch

Hello , I am thing to have the background color I have set to fully cover the view on an iPhone. If you look at the top you can see there’s two different colors and want the hole entire screen including the notch to be white , thank you

6 Replies

CodeNascher•16mo ago

is the white background on the body? if so, try also setting that color to the html element

SubiOP•16mo ago

html elment set to white plus i can't inspect element on my iphone unless there is way for me to do that mobile view on my laptop shows all one color

Mannix•16mo ago

maybe you need this meta tag <meta name="apple-mobile-web-app-status-bar-style" content="black"> change the content value to white

SubiOP•16mo ago

will give this a shot

neal mcguire•16mo ago

I'm not sure that you can. That area is not part of the browser. However, It might be possible to force the browser into full screen mode. That would require a little bit of javascript. The command is Element.requestFullscreen().

SubiOP•16mo ago

Got it ! Using nextjs

export const metadata: Metadata = {
  title: '50 States Tour',
  description: 'Generated by create next app',
  themeColor: "white"
}

export const metadata: Metadata = {
  title: '50 States Tour',
  description: 'Generated by create next app',
  themeColor: "white"
}

add themColor property add set the color , thanks guys

Gaming

Programming

Background-Color won’t cover iPhone notch