This content originally appeared on DEV Community and was authored by Nirazan Basnet
Generally, we use height:100vh for fullscreen layout which is easy hack and convenient way to get better design.
Example
.content {
height: 100vh;
}
But when we test our design on 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 get's more tricky address bar is at the bottom.
- Different browsers have different sized viewports
- Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh
- Whole document is filled to the page using 100vh
Problems
- On Chrome
Scrollbar issues has been detected. Bad user flow and difficult to navigate the content.
Note: I have also tested this issues on safari which makes more 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, documentHeight function sets new style property var('--doc-height') and includes current window height.
Final Results
Chrome Browser
Note: There is no any vertical extra scrollbar is appearing now 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
This content originally appeared on DEV Community and was authored by Nirazan Basnet
Nirazan Basnet | Sciencx (2022-05-04T04:05:37+00:00) Don’t use 100vh for mobile responsive. Retrieved from https://www.scien.cx/2022/05/04/dont-use-100vh-for-mobile-responsive/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.