htmlcssreactjsvercel

React.js website not taking up full screen on mobile

enter image description here

I made a website using React.js and deployed through Vercel.

Everything is fine on the mobile and desktop version. But in the mobile version I want to change the color of the status bar to be white instead of black.

Is there a way to directly change the styling of the status bar in react?

Solution

  • Place this code in the <head> tag of your HTML.

    <meta name="theme-color" content="#000000" />

    If you need to support Android, iPhone and Windows phone; you need to add these three meta tags.

    <!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ffffff">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ffffff">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">

    From Geekinsta