我的小前端 —— 移动端特殊效果-让页面宽度自适应

Posted 2020-06-14

没有什么特别新技术，就是记录我做移动端遇到的问题

2016-02-16

---

 移动端的页面宽度不固定，让页面宽度自适应的方法：

1、直接属性赋值，页面宽度不固定[我常用第一个]

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2、页面DIV宽度固定320内，由JS控制缩放。[如果页面太宽，比例变了。个人觉得不能用于平板和PC端]

<script>
    (function () {
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content = "width=320,minimum-scale=1,maximum-scale=1.3,user-scalable=no";
        document.head.appendChild(meta);
        if (/android/i.test(navigator.userAgent)) {
            document.body.style.zoom = document.body.clientWidth / 320;
        }
    })();
</script>

3、页面DIV宽度固定720px，由JS控制缩放。[2和3，选择第3个，问题是720尺寸太大的图片太多，影响网速，出现卡顿]

!function (t, e) { function n(n, r) { var i, o, a = e.documentElement, s = e.querySelector(‘meta[name="viewport"]‘), u = Math.min(a.clientWidth, a.clientHeight); switch (n) { case "fixed": i = u / r, o = "width=" + r + ",initial-scale=" + i + ",maximum-scale=" + i + ",minimum-scale=" + i; break; case "rem": var c = t.devicePixelRatio || 1; a.setAttribute("data-dpr", c), a.style.fontSize = 100 * (u * c / r) + "px", i = 1 / c, o = "width=" + u * c + ",initial-scale=" + i + ",maximum-scale=" + i + ", minimum-scale=" + i } s.setAttribute("content", o) } n("fixed", 750) }(window, document)