什么是視口？移動端瀏覽器中的3種視口

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

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

1. 布局視口

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

圖1 布局視口

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

2. 視覺視口

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

圖2 視覺視口

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

3. 理想視口

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

圖3 理想視口

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

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




猜你喜歡：

前端開發(fā)工具有哪些?哪一款最好用?

web前端兼容性面試題匯總

前端能開發(fā)游戲嗎?