移動端頁面按手機屏幕分辨率自動縮放的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