移動端頁面按手機螢幕解析度自動縮放的js

標籤：需求   hone   樣式   soft   text   顯示   targe   log   imu   

<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），而Google等瀏覽器採用小手機模式瀏覽頁面的時候，上面的值為物理解析度，調試的時候很難把控頁面樣式，在手機端的樣式也會因此大亂，在頁面頭部加入以上一段js之後，在手機端就可以正常顯示了，

 

var phoneScale = phoneWidth/750;

除以的為設計圖設計的頁面寬度，750是按iphone6來設計（根據自己使用需求來修改），即讓頁面的

 放大比率=螢幕的邏輯解析度/物理解析度，從而達到適應手機的效果。

（注意，有時候頁面加了這段代碼在調試的時候，小手機裡依然沒有按這個比例縮放，但是手機開啟是縮放了的，那調試的時候就把物理解析度數值自訂為邏輯解析度的值，如750來調試樣式，就跟手機看到的效果一樣了。這個問題目前我還不明白是為什麼，因為偶爾有時候在chrome的小手機裡那個縮放等額比例就會生效，大多數不生效，還請大神指教）

本文出自 “小敘前端” 部落格，請務必保留此出處http://beileixinqing.blog.51cto.com/7540036/1880406

移動端頁面按手機螢幕解析度自動縮放的js