什么是視口？移動(dòng)端瀏覽器中的3種視口

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

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

1. 布局視口

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

圖1 布局視口

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

2. 視覺(jué)視口

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

圖2 視覺(jué)視口

需要注意的是，當(dāng)我們?cè)谑謾C(jī)中縮放網(wǎng)頁(yè)的時(shí)候，操作的是視覺(jué)視口，而布局視口仍然保持原來(lái)的寬度。

3. 理想視口

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

圖3 理想視口

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

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




猜你喜歡：

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

web前端兼容性面試題匯總

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