<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手機(jī)的物理分辨率 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">'); // andriod 2.3以上 } else { document.write('<meta name="viewport" content="width=device-width,user-scalable=no">'); } // 其他系統(tǒng) } else { document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); }</script>      

做手機(jī)端頁面最頭疼的就是物理分辨率和邏輯分辨率的轉(zhuǎn)換了，當(dāng)拿到設(shè)計(jì)圖的時(shí)候，圖基本都是按物理分辨率來設(shè)計(jì)的，一般常用的為640（iphone5/5s）、750（iphone6/6s），而谷歌等瀏覽器采用小手機(jī)模式瀏覽頁面的時(shí)候，上面的值為邏輯分辨率，調(diào)試的時(shí)候很難把控頁面樣式，在手機(jī)端的樣式也會(huì)因此大亂，在頁面頭部加入以上一段js之后，在手機(jī)端就可以正常顯示了，

var phoneScale = phoneWidth/750;

除以的為設(shè)計(jì)圖設(shè)計(jì)的頁面寬度，750是按iphone6來設(shè)計(jì)（根據(jù)自己使用需求來修改），即讓頁面的 放大比率=屏幕的邏輯分辨率/物理分辨率，從而達(dá)到適應(yīng)手機(jī)的效果。

（注意，有時(shí)候頁面加了這段代碼在調(diào)試的時(shí)候，切記刷新，刷新過后就會(huì)按手機(jī)縮放比例顯示）

概念解析：

phys.width:一般我們所指的寬度width即為phys.width，物理寬度（物理分辨率）

device-width:又稱為css-width，設(shè)備寬度（邏輯分辨率）

其中我們可以獲取phys.width通過document.documentElement.clientWidth;

而獲取css-width通過 window.screen.width獲取。

所以這里  phoneWidth（邏輯分辨率） = parseInt(window.screen.width);

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

明白一個(gè)瀏覽器默認(rèn)行為。

試想，瀏覽器如果把電腦端的980px的網(wǎng)頁展現(xiàn)在寬度為750px的iphone6手機(jī)屏上，勢(shì)必會(huì)放不下，手機(jī)端橫向會(huì)出現(xiàn)滾動(dòng)條，怎么阻止這種情況呢，很簡(jiǎn)單，瀏覽器默認(rèn)一個(gè)虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認(rèn)值如：safari iphone：980px;

opera:850px;

Andriod webkit:800px;

IE:974px;