JavaScript實現移動端頁面按手機螢幕解析度自動縮放的最強程式碼

NO IMAGE

 手機的螢幕有大有小,移動web最好做成響應式佈局,也就是自適應螢幕,沒有固定寬高,這樣的話,在所有手機上都可以正常顯示。關於移動端頁面按手機螢幕解析度自動縮放的js,先附上程式碼


<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">');
}
// 其他系統
} else {
document.write('<meta name="viewport" content="width=device-width, initial-scale=' phoneScale ',minimum-scale=' phoneScale ',maximum-scale =' phoneScale  ',user-scalable=no,">');
}
</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來替代。

參考連結:

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

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

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援!

您可能感興趣的文章:

關於meta viewport中target-densitydpi屬性詳解(推薦)自適應佈局meta標籤中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結java 查詢oracle資料庫所有表DatabaseMetaData的用法(詳解)jQuery實現響應瀏覽器縮放大小並改變背景顏色瀏覽器縮放檢測的js程式碼Iphone手機、安卓手機瀏覽器控制預設縮放大小的方法總結(附程式碼)