移动端页面按手机屏幕分辨率自动缩放的js

Posted 2020-08-22

<script>
        var phoneWidth = parseInt(window.screen.width);
        var phoneHeight = parseInt(window.screen.height);
        var phoneScale = phoneWidth/750; //除以的值按手机的物理分辨率
        var ua = navigator.userAgent;
        if (/android (\d+\.\d+)/.test(ua)) {
            var version = parseFloat(RegExp.$1);
            // andriod 2.3
            if (version > 2.3) {
                document.write(‘<meta name="viewport" content="width=device-width, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, target-densitydpi=device-dpi, user-scalable=no">‘);
                // andriod 2.3以上
            } else {
                document.write(‘<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no">‘);
            }
            // 其他系统
        } else {
            document.write(‘<meta name="viewport" content="width=device-width, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, user-scalable=no, target-densitydpi=device-dpi">‘);
        }
    </script>

   

做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，一般常用的为640（iphone5/5s）、750（iphone6/6s），而谷歌等浏览器采用小手机模式浏览页面的时候，上面的值为物理分辨率，调试的时候很难把控页面样式，在手机端的样式也会因此大乱，在页面头部加入以上一段js之后，在手机端就可以正常显示了，

 

var phoneScale = phoneWidth/750;

除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改），即让页面的

 放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。

（注意，有时候页面加了这段代码在调试的时候，小手机里依然没有按这个比例缩放，但是手机打开是缩放了的，那调试的时候就把物理分辨率数值自定义为逻辑分辨率的值，如750来调试样式，就跟手机看到的效果一样了。这个问题目前我还不明白是为什么，因为偶尔有时候在chrome的小手机里那个缩放等额比例就会生效，大多数不生效，还请大神指教）

本文出自 “小叙前端” 博客，请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1880406