移動web開發之視口viewport

時間 2019-11-16

標籤移動 web 開發 viewport 欄目無線简体版

原文原文鏈接

前面的話

　　在CSS標準文檔中，視口viewport被稱爲初始包含塊。這個初始包含塊是全部CSS百分比寬度推算的根源，它給CSS佈局限制了一個最大寬度。在桌面上，視口的寬度和瀏覽器窗口的寬度一致。而在移動端，視口分爲佈局視口(layout viewport)、視覺視口(visual viewport)和理想視口(ideal viewport)javascript

佈局視口

　　移動端設備的問題是，若是使視口的寬度和瀏覽器窗口寬度同樣會致使很醜陋的結果。移動端瀏覽器一般的寬度是240到640像素，且大多數設計給桌面的網站的寬度至少是800px。所以網站內容在手機上看起來會很是窄java

　　//下圖是新浪網在手機端的顯示狀態，若是不進行縮放操做的話，文字幾乎是沒法看清的web

　　在手機上，視口與移動端瀏覽器屏幕寬度再也不相關聯，而是徹底獨立的。咱們稱它爲佈局視口——CSS佈局會根據它來計算，並被它約束chrome

　　爲了容納爲桌面瀏覽器設計的網站，移動設備默認的佈局視口寬度遠大於屏幕的寬度，設置爲980px或1024px（也多是其它值，這個是由設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度瀏覽器

　　document.documentElement.clientWidth/Height返回的是佈局視口的尺寸app

視覺視口

　　雖然獨立佈局視口的創造很大程度地幫助了桌面網站到手機上的轉移，但咱們不能徹底無視移動端設備的屏幕尺寸。一些CSS聲明與用戶見到的東西有關，而與CSS的初始包含塊無關。而且，有時候知道用戶看到了網站的哪些部分對web開發者會有幫助iphone

　　視覺視口是用戶正在看到的網站的區域，對於的javascript屬性是window.innerWidth/Heightide

　　[注意]安卓webkit2和代理瀏覽器存在兼容問題佈局

　　縮放會影響視覺視口的大小。當縮放程度是100%時，視覺視口與設備屏幕同樣寬。放大使視覺視口變得更小，由於屏幕上顯示的CSS像素更小了，而縮小會讓視覺視口更大，由於屏幕上的CSS像素更多了。所以縮放程度和視覺視口的大小是逆相關的：放得越大，視覺視口越小　性能

　　以iphone5爲例，瀏覽器佈局視口的寬度默認是1024px，屏幕寬度只有640個設備像素，DPR爲2，因此CSS像素是320px。如今用戶從100%放大到200%，CSS像素被放大，直到屏幕上只有160個CSS像素。可是，佈局視口仍然保持在1024px，因此頁面中的元素並無改變大小。

　　[注意]當用戶縮放時，只有視覺視口的尺寸會發生改變，佈局視口不會改變。移動端的縮放不會致使CSS佈局被從新計算。因爲在手機上會常常發生縮放，而且手機的處理器工做得很慢，電池消耗地很快，所以不從新進行佈局對性能來講有很大的好處

　　//如下代碼表示3秒後，頁面縮放從100%到200%

<script>
test.innerHTML = '屏幕寬度:' + screen.width + '<br>視覺視口:' + window.innerWidth;
setTimeout(function(){
    var meta = document.getElementsByTagName('meta')[1];
    meta.setAttribute('content','initial-scale=2');
    test.innerHTML = '屏幕寬度:' + screen.width + '<br>視覺視口:' + window.innerWidth;
},3000);
</script>

理想視口

　　默認狀況下，一個手機或平板瀏覽器的佈局寬度是980或1024像素。雖然這能讓桌面網站不被壓扁，可是這並不理想，尤爲對於手機用戶，由於在狹窄的屏幕上更適合一個狹窄的網站

　　換句話說，佈局視口的默認寬度並非一個理想的寬度。這就是爲何蘋果和其餘效仿蘋果的瀏覽器廠商，會引進理想視口。它是對設備來講，最理想的佈局視口尺寸。顯示在理想視口中的網站擁有最理想的瀏覽和閱讀的寬度，用戶剛進入頁面時也再也不須要縮放

　　只有當網站是爲手機準備的時候才應該使用理想視口。只有主動地往頁面裏添加meta視口標籤時理想視口才會生效。若是沒有meta視口標籤聲明，那麼佈局視口將會維持它的默認寬度，理想視口只有當顯式地使用它的時候纔會產生影響

//這一行代碼告訴瀏覽器，佈局視口的寬度應該與理想視口的寬度一致
<meta name="device" content="width=device-width">

　　定義理想視口是瀏覽器的工做，而不是設備或操做系統的工做。所以，同一設備上的不一樣瀏覽器擁有不一樣的理想視口。例如，三星galaxy pocket上的安卓webkit的理想視口是320*427px，而opera mobile12的則是240*320px。可是，瀏覽器的理想視口的大小也取決於它所處的設備。三星galaxy s4上的chrome的理想視口是360*640px，可是在nexus7上，則是601*962px。緣由很明顯：Nexus7是一個平板，它擁有更寬的屏幕，所以理想視口也應該更寬

　　screen.width/height返回是理想視口的尺寸

　　[注意]當設備方向改變時，iphone中理想視口screen.width/height的值並不會改變，但安卓設備會改變。而佈局視口document.documentElement.clientWidth和視覺視口window.innerWidth的值，蘋果和安卓都會改變

meta視口

　　meta視口標籤存在的主要目的是讓佈局視口的尺寸和理想視口的尺寸匹配。它由apple發明，其餘手機和平板複製了它的大部份內容。桌面瀏覽器不支持，也不須要它，由於它們沒有理想視口的概念。IE是一個例外：在手機上它支持meta視口標籤，但最好使用@-ms-viewport

　　meta視口標籤應該被放在HTML文檔的<head>中，而且按如下格式書寫:

<meta name="viewport" content="name=value,name=value">

　　每個名/值對都是一個給瀏覽器發號命令的指令。它們被逗號分隔，共有6個

　　一、width:設置佈局視口的寬度爲特定的值
　　二、initial-scale:設置頁面的初始縮放程度和佈局視口的寬度
　　三、minimum-scale:設置了最小縮放程度(用戶可縮小的程度)
　　四、maximum-scale:設置了最大縮放程度(用戶可放大的程度)
　　五、user-scalable:是否阻止用戶進行縮放
　　六、height:設置佈局視口的高度(未被實現)

width

　　【0】不設置寬度

　　例如，iPhone4S若是不設置viewport，他就會默認是980px，就像把屏幕分紅980份。若是設置一個元素爲100px*100px，看起來就是屏幕的100/980

　　【1】把佈局視口的尺寸設爲一個理想的值

<meta name="viewport" content="width=device-width">

　　假如，iPhone4S若是設置viewport width=device-width，他就會是320px，就像把屏幕分紅320份。若是設置一個元素爲100px*100px，看起來就是屏幕的100/320

　　【2】把佈局視口的尺寸設爲固定寬度

<meta name="viewport" content="width=400">

　　瀏覽器支持的最大值是10000個像素，最小值約爲理想視口的20%，安卓webkit不容許任何小於佈局視口的寬度。若是你指定了一個這樣的值，它會自動轉換爲默認佈局視口，一般是980px。IE10不容許任何超出480px的值，超出的話會自動轉換爲佈局視口的默認寬度1024px

initial-scale

　　initial-scale指令設置了頁面的初始縮放程度。1表明100%，2表明200%。縮放程度是根據理想視口來計算的

當前縮放值 = 理想視口寬度  / 視覺視口寬度

　　[注意]安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設置width屬性時才表現正常

　　縮放程度與視覺視口的寬度是逆相關的，越高的縮放程度意味着視覺視口越小。因此initial-scale=1時視覺視口尺寸和理想視口尺寸是同樣的。initial-scale=2會放大到200%，所以視覺視口的高寬是理想視口的一半

【默認值】

　　安卓設備上的initial-scale並無默認值，而在iphone和ipad上，不管viewport設置的寬度是多少，若是沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的　

【1】width=device-width,initial-scale=1

　　IE10中當initial-scale爲1時，它在橫屏模式下寬度保持着320px，但width=device-width時它會從320px變爲480px

　　因此爲了在全部瀏覽器上解決這個問題，須要使用

<meta name="viewport" content="width=device-width,initial-scale=1">

【2】width=400,initial-scale=1

<meta name="viewport" content="width=400,initial-scale=1">

　　把佈局視口的寬度設爲400px，而後再把它設爲理想視口的寬度。結果瀏覽器選擇了每一個方向最大的尺寸。所以早期的iphone手機在豎屏模式下的佈局視口寬度是400px(320px和400px中較大的值)，在橫屏模式下是480px(480px和400px較大的值)

　　所以，能夠給佈局視口設置一個最小寬度，並在設備和方向上有需求時容許瀏覽器將佈局視口設得更寬

minimum-scale和maximum-scale

　　沒有這些指令的時候，瀏覽器容許用戶的縮放級別達到5(20%-500%);有這些指令的時候，範圍可擴大到10(10%到1000%)。更高的縮放程度不被支持，所以設置maximum-scale=20和設置maximum-scale=10的效果是同樣的。安卓webkit不支持minimum-scale。一樣，它的縮放範圍是4(25%-400%)，而且不支持改變這個範圍

user-scalable

　　user-scalable=no表示禁止縮放

【改變meta視口標籤】

　　在大多數瀏覽器中，能夠改變meta視口標籤，假設meta視口是文檔中的第一個meta標籤

var meta = document.getElementsByTagName('meta')[0];
meta.setAttribute('content','width=400');

　　咱們沒法經過移除meta標籤來使佈局視口變回它默認的寬度。但能夠把它設爲一個固定的值。例如，若是想提供"切換到桌面佈局"的功能，能夠把寬度設爲980px或1024px

【經常使用meta視口標籤】

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放

【IOS9+專用屬性】

"shrink-to-fit=no"

　　使用Viewport元標記"width=device-width"會致使頁面縮小以適應溢出視口邊界的內容。能夠經過添加"shrink-to-fit=no"到meta標籤來覆蓋此行爲，增長的值將阻止頁面縮放以適應視口

總結

　　在桌面瀏覽器中，瀏覽器窗口就是約束CSS佈局的視口。而在手機端，佈局視口會限制CSS佈局；視覺視口表示瀏覽器的可視區域，決定用戶看到什麼；理想視口是對於特定設備的特定瀏覽器的佈局視口的一個理想尺寸

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。