Don’t use 100vh for mobile responsive

Generally, we use height:100vh it is for fullscreen layout which is an easy hack and a convenient way to get better design.

Example

.content {
height: 100vh;
}

But when we test our design on an actual device, we encounter several issues:

  • Mostly Chrome and Firefox browsers on mobile have got a UI (address bar etc) at the top.
  • On Safari it gets more tricky address bar is at the bottom.
  • Different browsers have differently sized viewports
  • Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh
  • The whole document is filled to the page using 100vh

Problems

  • On Chrome
Responsive Chrome browser

Scrollbar issues have been detected. Bad user flow and difficult to navigate the content.

Note: I have also tested these issues on safari which makes bad user flow

Solutions

Detect the height of the app by using JS

Setting the height of the page (using javascript) with the window.innerheight property.

const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()

Using, CSS Variable

:root {
--doc-height: 100%;
}

html,
body {
padding: 0;
margin: 0;
height: 100vh; /* fallback for Js load */
height: var(--doc-height);
}

Here, the documentHeight function sets a new style property var(‘ — doc-height’) and includes the current window height.

Final Results

Chrome Browser

Responsive Chrome browser

Note: There is no vertical extra scrollbar appearing now and also no issues on Safari too. The bottom address bar of safari is always on the bottom which makes good user flow to the website

Conclusion

👏👏 By coming this far I hope you can solve the mobile devices' viewport issues. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Originally published at https://dev.to on May 4, 2022.

--

--

Creative coder, Dreamer, Design lover, Passionate about UI/UX experience & Front-end Engineer. https://nirajanbasnet.com.np , https://codepen.io/nirazanbasnet

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nirazan Basnet

Nirazan Basnet

Creative coder, Dreamer, Design lover, Passionate about UI/UX experience & Front-end Engineer. https://nirajanbasnet.com.np , https://codepen.io/nirazanbasnet