移动端适配

视口

布局视口

documnet.documentElement.clientWidth

视觉视口

document.innerWidth

适配

rem适配

/*媒体查询*/
/*布局时可能会用到*/
@media screen and (-webkit-device-pixel-ratio : 2) {

}
/*使用全局样式样式去掉*/
* {
    /* y轴可以缩放,x轴不行 */
    touch-action: pan-y;
}

动态设置

let style = document.createElement('style');
style.innerHTML = `html{font-size: ${document.documentElement.clientWidth / 16}px !important;}`;
document.head.appendChild(style);
// 阻止默认事件,如滚动
elem.addEventListener('touchstart', fn, { passive: false });

viewport适配

// 将所有视口的宽度调整为设计图宽度
// 需要在页面上写好 <meta name="viewport" content="width=device-width">
// 是为了获取理想视口的宽度， 如果不写这句话，布局适口默认为980
let targetWidth = 750;
let meta = document.querySelector('meta[name=viewport]');
let scale = document.documentElement.clientWidth / targetWidth;
meta.content = `initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no`;