移动端适配方案有哪些?

195 阅读1分钟
(function (pw) {
	var d = document;
        var a = ((d.documentElement && d.documentElement.clientWidth) || (screen && screen.width)) / pw;
        var vp = document.querySelectorAll("meta[name='viewport']")[0];
        if (!vp) {
        vp = d.createElement('meta');
        d.head.appendChild(vp);
        }
        vp.setAttribute('name', 'viewport');
        vp.setAttribute('content', 'width=device-width,initial-scale=' + a + ',minimum-scale=' + a + ',maximum-scale=' +
        a + ',user-scalable=no');
})(750);
  1. 获取屏幕宽度:(d.documentElement && d.documentElement.clientWidth) || (screen && screen.width)
  2. 除以750px,得到倍数a
  3. 在head头部的meta标签中,设置initial-scale、maximum-scale、user-scale=a
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">