移動端自適應 meta viewport設定

2021-08-25 11:04:32 字數 2245 閱讀 7748

加上 

1、viewport

移動裝置上的viewport是裝置螢幕上用來顯示網頁的那部分區域,再具體一點就是瀏覽器上用來顯示網頁的那部分區域,但viewport又不侷限於瀏覽器可視區域的大小,它可能比瀏覽器的可視區域大,也可能比瀏覽器的可視區域小。在預設情況下,移動裝置上的viewport都是大於瀏覽器可視區域的,這是因為移動裝置的解析度相對於pc來說都比較小,所以為了能在移動裝置上正常顯示那些為pc瀏覽器設計的**,移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px(也可能是其它值,由裝置本身決定),但後果是瀏覽器出現橫向滾動條,因為瀏覽器可視區域的寬度比預設的viewport的寬度小。

2、3個viewport

(1)layout viewport

如果把移動裝置上瀏覽器的可視區域設為viewport的話,某些**會因為viewport太窄而顯示錯亂,所以這些瀏覽器就缺省會把viewport設為乙個較寬的值,比如980px,使得即使是那些為pc瀏覽器設計的**也能在移動裝置瀏覽器上正常顯示。這個瀏覽器預設的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentelement.clientwidth來獲取。

(2)visual viewport

layout viewport的寬度是大於瀏覽器可視區域的寬度的,所以還需要乙個viewport來代表瀏覽器可視區域的大小,這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentelement.innerwidth來獲取。

(3)ideal viewport

ideal viewport是乙個能完美適配移動裝置的viewport。首先,不需要縮放和橫向滾動條就能正常檢視**的所有內容;其次,顯示的文字、大小合適,如14px的文字不會因為在乙個高密度畫素的螢幕裡顯示得太小而無法看清,無論是在何種密度螢幕,何種解析度下,顯示出來的大小都差不多。這個viewport叫做 ideal viewport。

ideal viewport並沒有乙個固定的尺寸,不同的裝置有不同的ideal viewport。例如,所有的iphone的ideal viewport寬度都是320px,無論它的螢幕寬度是320還是640。

ideal viewport 的意義在於,無論在何種解析度的螢幕下,針對ideal viewport 而設計的**,不需要縮放和橫向滾動條都可以完美地呈現給使用者。

3、利用meta標籤對viewport進行控制

移動裝置預設的viewport是layout viewport,,但在進行移動裝置**的開發時,需要的是ideal viewport。要得到ideal viewport,需要用到meta標籤。

head標籤中加入:

meta viewport 的6個屬性:

width 

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

initial-scale 

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

minimum-scale 

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

maximum-scale

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

height 

設定layout viewport 的高度,這個屬性並不重要,很少使用

user-scalable 

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

width能控制layout viewport的寬度,如果不指定該屬性,layout viewport將預設為980px或1024px(也可能是其它值,由裝置本身決定),如果把layout viewport的寬度設定為移動裝置的寬度,那麼layout viewport將成為ideal viewport。

其實,要把當前的viewport寬度設為ideal viewport的寬度,既可以設定width=device-width,也可以設定initial-scale=1,但有乙個小缺陷,就是width=device-width會導致iphone、ipad橫豎屏不分,initial-scale=1會導致ie橫豎屏不分,都以豎屏的ideal viewport寬度為準。所以,最完美的寫法兩者都寫上去, initial-scale=1 解決 iphone、ipad的缺陷,width=device-width解決ie的缺陷。

viewport設定移動端自適應的方法:

移動端自適應

1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...

移動端自適應

width device width width為設定layout viewport 的寬度,為乙個正整數,width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值,可以是乙個帶小數的數字,1.0就是佔網頁的100 mi...

移動端PC端自適應

查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...