1. 设置标签头
<meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
2. 设置body html 全屏
<style>
html, body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
3. 避免使用px单位 尽量使用rem 百分比单位并在屏幕发生改变和初始化页面的时候调用以下函数
function resizeRem() {
if (window.innerWidth < window.innerHeight)
{
var html = document.querySelector('html');
var rem = html.offsetHeight / 10.80;
html.style.fontSize = rem + "px";
}
else {
var html = document.querySelector('html');
var rem = html.offsetWidth / 19.20;
html.style.fontSize = rem + "px";
}
}
4. 使用@media标签做一套横屏和竖屏的适配
@media all and (orientation : portrait) 竖屏
@media all and (orientation : landscape)横屏
按照以上操作可以适配多种情况。