移动端相关问题

1. 移动端适配

1. viewport的使用
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

/*
  viewport 
  name = "viewport"  视图窗口
  content=""
    width=device-width   设备宽度 
    initial-scale=1.0    初始化的比例值
    maximum-scale=1      允许用户的最大缩放值
    minimum-scale        允许用户的最小缩放值
    user-scalable=no     是否允许用户缩放

移动布局思路：
  1.固定宽度/高度（设计图的方法）
  2.百分比（相对于父级的宽度与高度；）【样式继承】
  3.rem:
    a)em根据元素自身的字体大小计算 元素自身 16px 1em=16px
    b)Rem R ->
      root 根节点( html ) 根据html的字体大小计算其他元素尺寸
      em  父节点
*/ 

2. format-detection的使用
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
/*
  telephone：电话
  eamil：邮箱
  date：日期
  address：地址
*/

3. 禁止IE使用兼容性模式(PC)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

2. 解决1px细线问题

出现原因：在retina（视网膜）屏上面，devicePixelRatio（物理像素）这个值是2或3，所以1px长度映射到物理像素上就有2px或3px那么长

// 解决方法
var viewport = document.querySelector("meta[name=viewport]");

if (window.devicePixelRatio === 1) { 
   viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
 } else if (window.devicePixelRatio === 2) { 
  viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no') 
} else if (window.devicePixelRatio === 3) { 
  viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no') 
} 

var docEl = document.documentElement; 
var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; 
docEl.style.fontSize = fontsize;

3. 自适应适配方案

3.1 flexible.js

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
(function (designWidth, maxWidth) {
  var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;
  //浏览器竖屏与横屏转换的BUG。
  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    maxWidth = maxWidth || 540;
    width > maxWidth && (width = maxWidth);
    var rem = width * 100 / designWidth;
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  }

  if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle);
  } else {
    var wrap = doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap = null;
  }
  // 要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();

  win.addEventListener("resize", function () {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);

  win.addEventListener("pageshow", function (e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);

  if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
  } else {
    doc.addEventListener("DOMContentLoaded", function (e) {
      doc.body.style.fontSize = "16px";
    }, false);
  }
})(750, 1024);

3.2 固定宽度

<script>
  fixLayout()
  window.addEventListener("resize",fixLayout);
  function fixLayout(){
    const width = window.screen.width;  //屏幕的宽度；
    const fixW = 750;   //设计图的比例
    const scale = width/ fixW;    // scale比例
    const meta = document.createElement("meta")
    meta.setAttribute("name","viewport")
    meta.setAttribute("content",`width=device-width, initial-scale=${scale}`)
    document.head.appendChild( meta )
  }
</script>

3.3 rem适配

<script>
  remChange()
  window.addEventListener("resize",remChange)
  function remChange(){
    const html = document.querySelector('html');
    const width = html.getBoundingClientRect().width;   //拿到适配的宽度值
    html.style.fontSize = width / 3.75 + "px";  // 100
  }
</script>