布局視口、視覺視口和理想視口分別是什么？

視口(Viewport)是移動Web開發(fā)中一個非常重要的概念，最早是由蘋果公司在推出iPhone手機時發(fā)明的，其目的是為了讓iPhone的小屏幕盡可能完整顯示整個網(wǎng)頁。通過設(shè)置視口，不管網(wǎng)頁原始的分辨率尺寸有多大，都能將其縮小顯示在手機瀏覽器上，這樣保證網(wǎng)頁在手機上看起來更像在桌面瀏覽器中的樣子。在蘋果公司引入視口的概念后，大多數(shù)的移動開發(fā)者也都認(rèn)同了這個做法。

視口簡單來說就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。在移動端瀏覽器中，存在著3種視口，分別是布局視口(layout viewport)、視覺視口(visual viewport)和理想視口(ideal viewport)。下面分別進行講解。

1. 布局視口

布局視口是指網(wǎng)頁的寬度，一般移動端瀏覽器都默認(rèn)設(shè)置了布局視口的寬度。根據(jù)設(shè)備的不同，布局視口的默認(rèn)寬度有可能是768px、980px或1024px等，這個寬度并不適合在手機屏幕中展示。移動端瀏覽器之所以采用這樣的默認(rèn)設(shè)置，是為了解決早期的PC端頁面在手機上顯示的問題。下面通過圖1演示什么是布局視口。

圖1 布局視口

在圖1中，當(dāng)移動端瀏覽器展示PC端網(wǎng)頁內(nèi)容時，由于移動端設(shè)備屏幕比較小，不能像PC端瀏覽器那樣完美地展示網(wǎng)頁，這正是布局視口存在的問題。這樣的網(wǎng)頁在手機的瀏覽器中會出現(xiàn)左右滾動條，用戶需要左右滑動才能查看完整的一行內(nèi)容。

2. 視覺視口

視覺視口是指用戶正在看到的網(wǎng)站的區(qū)域，這個區(qū)域的寬度等同于移動設(shè)備的瀏覽器窗口的寬度，下面通過圖2演示什么是視覺視口。

圖2 視覺視口

需要注意的是，當(dāng)我們在手機中縮放網(wǎng)頁的時候，操作的是視覺視口，而布局視口仍然保持原來的寬度。

3. 理想視口

理想視口是指對設(shè)備來講最理想的視口尺寸。采用理想視口的方式，可以使網(wǎng)頁在移動端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。下面通過圖3演示什么是理想視口。

圖3 理想視口

從圖3可以看出，在理想視口情況下，布局視口的大小和屏幕寬度是一致的，這樣就不需要左右滾動頁面了。

在開發(fā)中，為了實現(xiàn)理想視口，需要給移動端頁面添加標(biāo)簽配置視口，通知瀏覽器來進行處理。

猜你喜歡：

HTML5中figure標(biāo)簽的作用

什么是自適應(yīng)式頁面?

js數(shù)組遍歷：JavaScript如何遍歷數(shù)組?