Kevin Powell - Community•17mo 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•17mo ago

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

SubiOP•17mo 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•17mo 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•17mo ago

will give this a shot

neal mcguire•17mo 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•17mo 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