【转载整理】移动端页面按手机屏幕分辨率自动缩放的js

<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,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
    } else {
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
    }
} else {
    document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
}
</script>

做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，一般常用的为640（iphone5/5s）、750（iphone6/6s），而谷歌等浏览器采用小手机模式浏览页面的时候，上面的值为逻辑分辨率，调试的时候很难把控页面样式，在手机端的样式也会因此大乱，在页面头部加入以上一段js之后，在手机端就可以正常显示了，
var phoneScale = phoneWidth / 750;
除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改），即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率 ，从而达到适应手机的效果。
在这里插入图片描述
一个3.5寸的分辨率为320 * 480的屏幕a，ppi是(`根号(320^2 + 480^2)) / 3.5 = 164，约等于160。
一个3.8寸的分辨率为480 * 800的屏幕b，ppi是(根号(480^2 + 800^2)) / 3.8 = 245，约等于240。
一个4.3寸的分辨率为480 * 800的屏幕c，ppi是(根号(480^2 + 800^2)) / 4.3 = 217，约等于210。
一个4.3寸的分辨率为720 * 1280的屏幕d，ppi是(根号(720^2 + 1280^2)) / 4.3 = 342，约等于340。
一个5.5寸的分辨率为720 * 1280的屏幕e，ppi是(根号(720^2 + 1280^2)) / 5.5 = 267，约等于260。

它的页面有一个特点，就是：

顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边

这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：
在这里插入图片描述
这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：

document.documentElement.style.fontsize = docuement.documentElement.clientWidth / 6.4 + 'px';

6.4只是举个例子，如果是750的设计稿，应该除以7.5。
在这里插入图片描述
播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取100作为参照，为了计算rem的方便。

在这里插入图片描述

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

在这里插入图片描述
完整版：http://caibaojian.com/mobile-responsive-example.html

来源：CSDN

作者：Khun_HWJ

链接：https://blog.csdn.net/Khun_HWJ/article/details/98178910

标签

根号

分辨率