This is a workaround for iOS Safari and other mobile browsers.
At the top of the page, those browsers cover bottom of 100vh
page with "browser chrome" (navigation/context buttons), effectively cropping it. If you have something important at the bottom of your splash screen, chances are it will not be visible/available untill a user scrolls.
More on this issue here.
- Install it:
npm install --save react-div-100vh
oryarn add react-div-100vh
- Then import the component and wrap your stuff with
<Div100vh>
as you would with a normal<div style={{height: '100vh'}}>
, but this time mobile browsers should display the whole page on load:
import Div100vh from 'react-div-100vh'
const MyFullscreenComponent = () => (
<Div100vh>
<marquee>Your stuff goes here</marquee>
</Div100vh>
)
No need to specify any height
css on Div100vh
, it will be overriden in javascript anyway.
Please note that you most likely will want to set body {margin: 0}
css, unless you use some css reset that does it for you.