了解移動web viewport的知識，主要是為了切圖時(shí)心中有數(shù)。本文主要圍繞一個(gè)問題：切圖時(shí)怎樣設(shè)置相關(guān)參數(shù)？圍繞這個(gè)問題對viewport展開講解。

青銅峽網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

一、viewport【此處的viewport即layout viewport】概念

移動設(shè)備的viewport是指設(shè)備屏幕上能夠顯示網(wǎng)頁的一塊區(qū)域。

這塊顯示網(wǎng)頁的區(qū)域可能比瀏覽器可視區(qū)域大，也可能比瀏覽器可視區(qū)域小，切圖時(shí)也可以設(shè)置。默認(rèn)情況，移動設(shè)備的viewport大于移動設(shè)備瀏覽器的可視區(qū)域，主要是為了在移動設(shè)備上能夠顯示PC端的頁面。

移動設(shè)備瀏覽器會有一個(gè)默認(rèn)的viewport值可能是980px，1024px或其他值，由設(shè)備定。

手機(jī)瀏覽器要顯示pc頁面默認(rèn)做了兩件事，先把頁面渲染在980px的layout viewport中，然后通過縮放在手機(jī)屏幕上展示，讓用戶看到頁面全貌。

但是移動端切圖的時(shí)候我們不會用這個(gè)默認(rèn)的980px來布局，主要是因?yàn)?br />* 寬度不可控制，不同系統(tǒng)不同設(shè)備的默認(rèn)值viewport都可能不同
* 頁面縮小版顯式，交互不友好
* 鏈接不可點(diǎn)
* 有縮放，縮放后又有滾動，交互不友好。

而且用戶縮放會引起px和dp對應(yīng)關(guān)系發(fā)生變化，頁面放大一倍，那么css中1px所代表的物理像素會增加一倍，頁面縮小一倍，css中1px所代表的物理像素會減少一倍。

所以用默認(rèn)的980px布局是很不規(guī)范的，那么切圖時(shí)為了排版正確，我們怎么做呢？我們會用到標(biāo)簽，下面一步步說。

二、layout viewport和visual viewport

1、layout viewport

瀏覽器默認(rèn)的viewport叫l(wèi)ayout viewport，這個(gè)layour viewport可以通過document.documentElement.clientWidth 來獲取。（對前端切圖來說很重要）

2、visual viewport

layout viewport的寬度大于瀏覽器可視區(qū)域的寬度，還需要一個(gè)viewport代表瀏覽器可視區(qū)域的大?。▽η岸饲袌D來說不是太重要），這個(gè)viewport叫 visual viewport。

visual viewport的寬度可以通過window.innerWidth 來獲取。

3、ideal viewport

visual viewport代表移動設(shè)備瀏覽器可視區(qū)域的寬度，layout view為了顯示PC端頁面被設(shè)置的很大，現(xiàn)在移動端發(fā)展這么快速，還需要一個(gè)能完美適配移動設(shè)備的viewport。這個(gè)完美適配的viewport中用戶不需要縮放，不需要橫向滾動條就能正常查看網(wǎng)站的所有內(nèi)容。這個(gè)ideal viewport就是移動設(shè)備理想viewport。

ideal viewport的寬度等于移動設(shè)備的屏幕寬度。

三、利用meta標(biāo)簽對viewport進(jìn)行控制

移動端默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕寬的viewport，而切圖時(shí)需要讓這個(gè)默認(rèn)的layout viewport變成ideal viewport。這就是移動端開發(fā)中 標(biāo)簽的作用。

這段meta重置layout viewport的寬度為設(shè)備寬度，讓我們切圖時(shí)在ideal viewport中完成，而不是用默認(rèn)的layout viewport來切圖。

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。

在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：