JavaScript實現(xiàn)移動端頁面按手機屏幕分辨率自動縮放的最強代碼

<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">');
 // 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>      

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

var phoneScale = phoneWidth/750;

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

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

概念解析：

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。

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

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

opera:850px;

Andriod webkit:800px;

IE:974px;

然后會把這個980px虛擬窗口裝進(jìn)寬度為750px的iphone6中，當(dāng)然這樣的話必須縮放，這就是為什么在手機中展現(xiàn)電腦端頁面沒有出現(xiàn)橫向滾動條，而且字跡明顯變小的原因。

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

這段代碼切記要指定 initial-scale=***，在安卓系統(tǒng)中，不指定默認(rèn)的nitial-scale=***，只指定最小和最大縮放值，也可以正常顯示，但是safari瀏覽器則會失效，對于寬度是100%的頁面， 則顯示為頁面的30%左右的寬。

target-densitydpi=device-dpi

WebKit內(nèi)核默認(rèn)按照160的DPI來排版。假如設(shè)備真實DPI是480，寬度是1080，在WebKit會按160DPI，360寬度來排版。排版結(jié)束后在放大到1080寬。

所以當(dāng)取window.innerwidth之類的值的時候，取的是WebKit實際排版寬度360，而不是1080.

target-densitydpi=device-dpi可以強制內(nèi)核以480DPI排版，使畫面更精細(xì)，window.innerwidth也將為屏幕寬度1080.

但WebKit從去年開始取消了對target-densitydpi的支持。（所以現(xiàn)在不建議寫該屬性了）

想實現(xiàn)target-densitydpi=device-dpi的效果有什么方法？提交此次補丁的WebKit開發(fā)者說可以用responsive images 和 CSS device units來替代。

參考鏈接：

https://www.jb51.net/article/121524.htm

https://www.jb51.net/article/121515.htm

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對億速云的支持!