更新時間:2020-09-10 來源:黑馬程序員 瀏覽量:
視口(Viewport)是移動Web開發(fā)中一個非常重要的概念,最早是由蘋果公司在推出iPhone手機時發(fā)明的,其目的是為了讓iPhone的小屏幕盡可能完整顯示整個網(wǎng)頁。通過設置視口,不管網(wǎng)頁原始的分辨率尺寸有多大,都能將其縮小顯示在手機瀏覽器上,這樣保證網(wǎng)頁在手機上看起來更像在桌面瀏覽器中的樣子。在蘋果公司引入視口的概念后,大多數(shù)的移動開發(fā)者也都認同了這個做法。
視口簡單來說就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。在移動端瀏覽器中,存在著3種視口,分別是布局視口(layout viewport)、視覺視口(visual viewport)和理想視口(ideal viewport)。下面分別進行講解。
布局視口是指網(wǎng)頁的寬度,一般移動端瀏覽器都默認設置了布局視口的寬度。根據(jù)設備的不同,布局視口的默認寬度有可能是768px、980px或1024px等,這個寬度并不適合在手機屏幕中展示。移動端瀏覽器之所以采用這樣的默認設置,是為了解決早期的PC端頁面在手機上顯示的問題。下面通過圖1演示什么是布局視口。
圖1 布局視口
在圖1中,當移動端瀏覽器展示PC端網(wǎng)頁內(nèi)容時,由于移動端設備屏幕比較小,不能像PC端瀏覽器那樣完美地展示網(wǎng)頁,這正是布局視口存在的問題。這樣的網(wǎng)頁在手機的瀏覽器中會出現(xiàn)左右滾動條,用戶需要左右滑動才能查看完整的一行內(nèi)容。
視覺視口是指用戶正在看到的網(wǎng)站的區(qū)域,這個區(qū)域的寬度等同于移動設備的瀏覽器窗口的寬度,下面通過圖2演示什么是視覺視口。
圖2 視覺視口
需要注意的是,當我們在手機中縮放網(wǎng)頁的時候,操作的是視覺視口,而布局視口仍然保持原來的寬度。
理想視口是指對設備來講最理想的視口尺寸。采用理想視口的方式,可以使網(wǎng)頁在移動端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。下面通過圖3演示什么是理想視口。
圖3 理想視口
從圖3可以看出,在理想視口情況下,布局視口的大小和屏幕寬度是一致的,這樣就不需要左右滾動頁面了。
在開發(fā)中,為了實現(xiàn)理想視口,需要給移動端頁面添加標簽配置視口,通知瀏覽器來進行處理。
猜你喜歡: