视口

布局适口 一般用document.documentElement.clientWidth

视觉适口 一般用window.innerWidth

 rem 适配

    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 }
);

 * { touch-action: pan-y; } 
 使用全局样式样式去掉

 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`;

 缩放

@media screen and (-webkit-device-pixel-ratio : 2) {
    
}

 

转载于:https://www.cnblogs.com/tujw/p/11029613.html