更新時(shí)間:2020-09-10 來(lái)源:黑馬程序員 瀏覽量:
視口(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)行講解。
布局視口是指網(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)容。
視覺(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)的寬度。
理想視口是指對(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)行處理。
猜你喜歡: