Avoid using 100vh[easy to understand] at mobile terminal

Hello everyone , I meet you again , I'm your friend, Quan Jun .

CSS The viewport units in sound great . If you want to style elements to occupy the height of the entire screen , You can set height: 100vh, You have a perfect full screen element , The element resizes as the viewport changes ！ It is sad , This is not the case .100vh stay Move Browsers are broken in subtle but basic ways , This makes it almost useless . It's best to avoid 100vh , It depends on javascript Set the height for a full viewport experience .

The core issue is mobile browsers （ I'm browsing for you ,Chrome and Safari） have “ help ” function , The address bar is sometimes visible , Sometimes hidden , This changes the visible size of the viewport . These browsers will not 100vh Adjust the height to the visible part of the screen when the viewport height changes , It's going to be 100vh Set to the height of the browser , And hide the address bar . The result is , When the address bar is visible , The bottom of the screen will be cut off .

As shown below ：

When the address bar is displayed , Because the mobile browser mistakenly put 100vh Set to screen height without displaying the address bar , So the bottom of the screen is cut off . In the diagram above , Buttons that should be hidden at the bottom of the screen . What's worse is , When a user visits a website on a mobile device for the first time , The address bar will be visible at the top , So the default experience is a broken experience .

Better solution ：window.innerHeight

One way to solve this problem is to rely on javascript instead of CSS. When the page loads , Set the height to window.innerHeight The height can be correctly set to the visible part of the window . If the address bar is visible , be window.innerHeight Will be full screen height . If the address bar is hidden , be window.innerHeight Will be the height of the visible part of the screen , This is exactly what you expect .

stay Wordsheet.io At school , You can see this . for example , Try opening on your mobile browser wordsheet.io/demo/V3Y . Whether the address bar is visible or not , The screen will be the height of the viewport . Besides , By locking the height in place when the page is first loaded , It can prevent the address bar from being hidden in the process of using the website , This brings an embarrassing screen resizing experience .

Unfortunately , Don't rely on JavaScript Under the circumstances , There is still no easy way to make elements occupy the entire viewport height . height: 100vh Very close to , But in view of its limitations on mobile devices , It's best to avoid using it .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/133174.html Link to the original text ：https://javaforall.cn