手机h5适配不同分辨率的问题

这篇文章，我们来研究一下手机H5页面适配不同手机分辨率的问题。

众所周知，手机分辨率自从Android面世以来简直是醉了。320*480、480*800、480*856等等等。苹果公司又出了5，5S，6 ，6+，这样手机的分辨率更多了。

废话不多说，说一下适配方法。

第一种，就是将所有标签的 width设置为100%，所有div的css background 都改成img 便签。

但这种方法真心不是很优秀，而且如果该页面的高度 要求在手机显示屏可以完全显示出来，或者说不需要用户滚动该页面，上面的方法就不行了。

第二种方法就是 固定一个div宽度为320px，其他所有元素都是这个div的子元素，定位问题都是用position:absolute，然后通过获取运行页面浏览器的宽度，使用js代码为这个最外层的div添加scale。

参考代码 如下：

var t = function() {
            setTimeout(function() {
                var t = document.documentElement.clientWidth,
                    e = document.documentElement.clientHeight,
                    n = (t / 320).toString().substring(0, 6),
                    i = (e / 568).toString().substring(0, 6),
                    r = n;
                n > i && (r = i);
                var a = "-webkit-transform: scale(" + r + ");-webkit-transform-origin: top; opacity: 1;",
                $(".wrap").attr("style", a);
            }, 300)
        };
t(), window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", t, !1)

来源：CSDN

作者：丶大王叫我来巡山

链接：https://blog.csdn.net/jsj2009145520/article/details/44977405