Since it is a full-screen page, you need to apply for full-screen permission, or make a judgment and if it is not full-screen, do not display it and remind the user to turn on full-screen. In addition, most H5 pages are now mainly displayed on WeChat, so just adapt to WeChat.
Among them, width = width of the design draft, and then the entire page can basically be positioned according to the px of the design draft. Small screens are more troublesome. For example, the iPhone 4s will miss the bottom, so the design element content still needs to be considered. If the content can Just ignore the ones presented by sliding
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Since it is a full-screen page, you need to apply for full-screen permission, or make a judgment and if it is not full-screen, do not display it and remind the user to turn on full-screen.
In addition, most H5 pages are now mainly displayed on WeChat, so just adapt to WeChat.
Do media queries, percentage layout or rem, em can be done
Just use percentage for height
Media query or percentage layout
Recommend a basic adaptation method
head join
Among them, width = width of the design draft, and then the entire page can basically be positioned according to the px of the design draft. Small screens are more troublesome. For example, the iPhone 4s will miss the bottom, so the design element content still needs to be considered. If the content can Just ignore the ones presented by sliding
A usage I saw before is to use padding-top for height adaptation, which means that the content must be absolutely positioned. Can be used as needed.
Use rem when writing CSS, and then dynamically change the value of rem
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
Taobao flexible.js
Try to use vw percentage
calc(100vw - 20px) which is easy to solve