移動WEB viewport 相關知識

2021-08-01 04:25:32 字數 2254 閱讀 9946

了解移動web viewport的知識,主要是為了切圖時心中有數。本文主要圍繞乙個問題:切圖時怎樣設定

>相關引數?圍繞這個問題對viewport展開講解。

移動裝置的viewport是指裝置螢幕上能夠顯示網頁的一塊區域。

這塊顯示網頁的區域可能比瀏覽器可視區域大,也可能比瀏覽器可視區域小,切圖時也可以設定。預設情況,移動裝置的viewport大於移動裝置瀏覽器的可視區域,主要是為了在移動裝置上能夠顯示pc端的頁面。

移動裝置瀏覽器會有乙個預設的viewport值可能是980px,1024px或其他值,由裝置定。

手機瀏覽器要顯示pc頁面預設做了兩件事,先把頁面渲染在980px的layout viewport中,然後通過縮放在手機螢幕上展示,讓使用者看到頁面全貌。

但是移動端切圖的時候我們不會用這個預設的980px來布局,主要是因為

* 寬度不可控制,不同系統不同裝置的預設值viewport都可能不同

* 頁面縮小版顯式,互動不友好

* 鏈結不可點

* 有縮放,縮放後又有滾動,互動不友好。

而且使用者縮放會引起px和dp對應關係發生變化,頁面放大一倍,那麼css中1px所代表的物理畫素會增加一倍,頁面縮小一倍,css中1px所代表的物理畫素會減少一倍。

所以用預設的980px布局是很不規範的,那麼切圖時為了排版正確,我們怎麼做呢?我們會用到標籤,下面一步步說。

1、layout viewport

瀏覽器預設的viewport叫layout viewport,這個layour viewport可以通過document.documentelement.clientwidth 來獲取。(對前端切圖來說很重要)

2、visual viewport

layout viewport的寬度大於瀏覽器可視區域的寬度,還需要乙個viewport代表瀏覽器可視區域的大小(對前端切圖來說不是太重要),這個viewport叫 visual viewport。

visual viewport的寬度可以通過window.innerwidth 來獲取。

3、ideal viewport

visual viewport代表移動裝置瀏覽器可視區域的寬度,layout view為了顯示pc端頁面被設定的很大,現在移動端發展這麼快速,還需要乙個能完美適配移動裝置的viewport。這個完美適配的viewport中使用者不需要縮放,不需要橫向滾動條就能正常檢視**的所有內容。這個ideal viewport就是移動裝置理想viewport。

ideal viewport的寬度等於移動裝置的螢幕寬度。

移動端預設的viewport是layout viewport,也就是那個比螢幕寬的viewport,而切圖時需要讓這個預設的layout viewport變成ideal viewport。這就是移動端開發中標籤的作用。

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

>

這段meta重置layout viewport的寬度為裝置寬度,讓我們切圖時在ideal viewport中完成,而不是用預設的layout viewport來切圖。

meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的,目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿,引入對meta viewport的支援,事實也證明這個東西還是非常有用的。

在蘋果的規範中,meta viewport 有6個屬性(暫且把content中的那些東西稱為乙個個屬性和值),如下:

width

設定layout viewport

的寬度,為乙個正整數,或字串"width-device"

initial-scale

設定頁面的初始縮放值,為乙個數字,可以帶小數

minimum-scale

允許使用者的最小縮放值,為乙個數字,可以帶小數

maximum-scale

允許使用者的最大縮放值,為乙個數字,可以帶小數

height

設定layout viewport

的高度,這個屬性對我們並不重要,很少使用

user-scalable

是否允許使用者進行縮放,值為"no"或"yes", no 代表不允許,yes代表允許

移動WEB viewport 相關知識

了解移動web viewport的知識,主要是為了切圖時心中有數。本文主要圍繞乙個問題 切圖時怎樣設定相關引數?圍繞這個問題對viewport展開講解。移動裝置的viewport是指裝置螢幕上能夠顯示網頁的一塊區域。這塊顯示網頁的區域可能比瀏覽器可視區域大,也可能比瀏覽器可視區域小,切圖時也可以設定...

移動WEB viewport 相關知識

了解移動web viewport的知識,主要是為了切圖時心中有數。本文主要圍繞乙個問題 切圖時怎樣設定 相關引數?圍繞這個問題對viewport展開講解。移動裝置的viewport是指裝置螢幕上能夠顯示網頁的一塊區域。這塊顯示網頁的區域可能比瀏覽器可視區域大,也可能比瀏覽器可視區域小,切圖時也可以設...

移動web viewport(視口)

1.手機擁有了瀏覽器的初期並沒有專門為移動裝置設計頁面,造成的直接結果就是訪問的頁面是直接將電腦頁面進行縮放,操作起來十分不便,viewport就是用來解決這個問題的 2.viewport視口屬性 該屬性只有在移動端瀏覽器上才有用 移動裝置上用來顯示網頁的區域 如果把移動該裝置的瀏覽器當做相框的話,...