til
til copied to clipboard
"True" full height hero on mobile
window.innerHeight is your best bet.
Below method work on both android/chrome and ios/safari. One caveat is that you will see a flash from 100vh to window.innerHeight (at least on https://dautu.io) because the initial html is static-generated, and window is only avaible on client side.
componentDidMount() {
this.container.style.minHeight = `${window.innerHeight}px`
}
<div ref={this.setRef} className="min-h-screen">...</div>