viewport理解
viewport概念
手機(jī)瀏覽器是把頁面放在一個(gè)虛擬的“窗口”（viewport）中，窗口可大于或小于手機(jī)的可視區(qū)域镜会，一般手機(jī)默認(rèn)viewport大于可視區(qū)域。這樣不會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局橘原，用戶可以通過平移和縮放來看網(wǎng)頁的其他部分郁惜。
下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。
viewport分類
-
layout viewport
可以理解為內(nèi)容展示所需要實(shí)際區(qū)域猩系， 通過document.documentElement.clientWidth 來獲取
-
visual viewport
用戶可視范圍媚送，受限于設(shè)備，通過window.innerWidth 來獲取
-
ideal viewport
在visual viewport基礎(chǔ)上添加的概念--移動(dòng)設(shè)備的理想viewport,不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容,文字的大小是合適.它沒有一個(gè)固定的尺寸寇甸，不同的設(shè)備擁有有不同的ideal viewport季希。
不同分辨下的ideal viewport可能一樣
viewport控制
Mobile Safari 引入了”viewport元標(biāo)簽“來讓web開發(fā)者控制視口的尺寸及比例。具體使用meta標(biāo)簽
一個(gè)典型的針對(duì)移動(dòng)端優(yōu)化的站點(diǎn)包含類似下面的內(nèi)容:
<code>
<-meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</code>
設(shè)置參數(shù)講解如下:
其中幽纷，這些屬性可以同時(shí)使用，也可以單獨(dú)使用或混合使用博敬，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了友浸。
viewport動(dòng)態(tài)改變
- 方案一
可以使用document.write來動(dòng)態(tài)輸出meta viewport標(biāo)簽
<code>
document.write('<-meta name="viewport" content="width=device-width,initial-scale=1">')
</code>
- 方案二
通過setAttribute來改變
<pre>
<meta id="testViewport" name="viewport" content="width = 380">
<-script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
<-/script>
</pre>
參考文章
1.移動(dòng)前端不得不了解的html5 head 頭標(biāo)簽
2.MDN:在移動(dòng)瀏覽器中使用viewport元標(biāo)簽控制布局
4.屏幕尺寸
