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

 1 <script>
 2     var phoneWidth = parseInt(window.screen.width);
 3     var phoneHeight = parseInt(window.screen.height);
 4     var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
 5     var ua = navigator.userAgent;
 6     if (/Android (\d+\.\d+)/.test(ua)) {
 7         var version = parseFloat(RegExp.$1);
 8         // andriod 2.3
 9         if (version > 2.3) {
10             document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
11             // andriod 2.3以上
12         } else {
13             document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
14         }
15         // 其余系统
16     } else {
17         document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
18     }
19 </script>

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

var phoneScale = phoneWidth/750;

除以的为设计图设计的页面宽度，750是按iphone6来设计（根据本身使用需求来修改），即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。

（注意，有时候页面加了这段代码在调试的时候，切记刷新，刷新事后就会按手机缩放比例显示）

概念解析：

phys.width:通常咱们所指的宽度width即为phys.width，物理宽度（物理分辨率）

device-width:又称为css-width，设备宽度（逻辑分辨率）

其中咱们能够获取phys.width经过document.documentElement.clientWidth;

而获取css-width经过 window.screen.width获取。

因此这里  phoneWidth（逻辑分辨率） = parseInt(window.screen.width);

如iphone6的phys.width为750px，而css-width为375px。

 

明白一个浏览器默认行为。

试想，浏览器若是把电脑端的980px的网页展示在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种状况呢，很简单，浏览器默认一个虚拟窗口，不一样浏览器有不一样的虚拟窗口宽度的默认值如：safari iphone：980px;

opera:850px;

Andriod webkit:800px;

IE:974px;

而后会把这个980px虚拟窗口装进宽度为750px的iphone6中，固然这样的话必须缩放，这就是为何在手机中展示电脑端页面没有出现横向滚动条，并且字迹明显变小的缘由。

initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'

这段代码切记要指定 initial-scale=***，在安卓系统中，不指定默认的nitial-scale=***，只指定最小和最大缩放值，也能够正常显示，可是safari浏览器则会失效，对于宽度是100%的页面， 则显示为页面的30%左右的宽。

 

target-densitydpi=device-dpi

WebKit内核默认按照160的DPI来排版。假如设备真实DPI是480，宽度是1080，在WebKit会按160DPI，360宽度来排版。排版结束后在放大到1080宽。

因此当取window.innerwidth之类的值的时候，取的是WebKit实际排版宽度360，而不是1080.

target-densitydpi=device-dpi能够强制内核以480DPI排版，使画面更精细，window.innerwidth也将为屏幕宽度1080.

但WebKit从去年开始取消了对target-densitydpi的支持。（因此如今不建议写该属性了）

想实现target-densitydpi=device-dpi的效果有什么方法？提交这次补丁的WebKit开发者说能够用responsive images 和 CSS device units来替代。

 

（2017.02.20更新）

 

参考连接：http://www.cnblogs.com/wbxjiayou/p/5176815.html

                http://blog.csdn.net/fengri5566/article/details/9414599

相关连接：http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html