viewport是什么?
viewport 是用戶網(wǎng)頁的可視區(qū)域锅必。
viewport 翻譯為中文可以叫做"視區(qū)"病涨。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬霸奕，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局）畔师，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分掏颊。
viewport的進一步理解
- 在pc瀏覽器上
通俗的來講,viewport可以簡單的認(rèn)為是瀏覽器上的可視區(qū)域,
當(dāng)我們改變窗口大小的時候,可視區(qū)域的大小也會隨之而改變.
(原始大小)
(修改后的大小)
我們可以看出,當(dāng)我們修改窗口大小后,瀏覽器底部變多了個滾動條,以方便我們查看超出可視區(qū)域的內(nèi)容.
-
在手機瀏覽器上
那么當(dāng)我們把網(wǎng)頁放在手機瀏覽器上呢?我們要知道手機上的瀏覽器和pc上的瀏覽器的區(qū)別之一便是pc瀏覽器的可視區(qū)域是可以手動改變的,而手機瀏覽器的可視區(qū)域則是固定.一般和手機的寬度相等.
所以,如果不做任何處理的話,pc瀏覽器的網(wǎng)頁放到手機瀏覽器的應(yīng)該是這樣的:
網(wǎng)頁內(nèi)容超出手機大小,手機瀏覽器底部會出現(xiàn)一個橫向滾動條,這樣的話便會在一定程度上影響用于的體驗效果.所以為了解決這個問題,viewport則應(yīng)運而生,(據(jù)說是由蘋果提出并實現(xiàn),然后大部分手機廠商都競相模仿,所以現(xiàn)在我們用的絕大數(shù)手機都默認(rèn)實現(xiàn)了viewport)
并且移動終端的viewport要比較麻煩一些送膳，它有兩種viewport普碎，分別是展示viewport(visual viewport)和布局viewport(layout viewport)吼肥。當(dāng)我們加載網(wǎng)頁的時候,它會先將網(wǎng)頁內(nèi)容放到一個虛擬的viewport中(layout viewport ,一般這個layout viewport要大于手機屏幕寬度,如Safari iPhone為980px.)然后經(jīng)過縮放和放大,將其映射到visual viewport,
(而visual viewport的大小一般和手機的寬高相等) .
所以一般我們在手機瀏覽一些只針對桌面瀏覽器設(shè)計的網(wǎng)頁(沒有做響應(yīng)式),它是這樣的:
其布局與原內(nèi)容一樣,并且沒有底部的橫向滾動條,唯一區(qū)別便是要比原內(nèi)容要小一些,這是因為它經(jīng)過了縮放,我們可以通過手動放大來使得文字大小適應(yīng)我們的需求.這樣我們便解決了那些只針對桌面設(shè)計的網(wǎng)頁在手機瀏覽器上也能更好去瀏覽.
viewport 默認(rèn)大小帶來的問題
手機默認(rèn)的layout-viewport是多大呢，“l(fā)ayout viewport有多寬麻车？每個瀏覽器都不一樣缀皱，Safari iPhone為980px，Opera為850px动猬，Android WebKit為800px啤斗，最后IE為974px×蘖”
雖然viewport解決了我們的一些問題,但是它也為我們帶來了一些遺留問題.
那就是對于那些專門針對手機設(shè)計的頁面,我們?nèi)绻辉O(shè)置viewport的大小的話,那么會使得我們的網(wǎng)頁內(nèi)容整體縮小了,這樣便與我們的設(shè)計不相符了.如:
(符合設(shè)計標(biāo)準(zhǔn)的網(wǎng)頁內(nèi)容)
(在沒有設(shè)置viewport情況下的真實顯示的內(nèi)容)
明顯看出真實顯示的內(nèi)容與我們原內(nèi)容的布局排版和內(nèi)容大小都不有些出入,
所以為了解決這個問題,我們可以手動的設(shè)置一下 viewport 的寬度.
這里我給出一個通用的設(shè)置方案,在我們的head標(biāo)簽添加以下內(nèi)容:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這樣無論是pc端還是手機瀏覽器都和我們所預(yù)期的結(jié)果相同了.
