移動web開發之視口viewport

時間 2021-01-09 標籤移動 viewport

本文基於http://www.cnblogs.com/xiaohuochai/p/5496995.html，在該文的基礎下，進行整理。

在桌面上，視口的寬度和瀏覽器窗口的寬度一致。而在移動端，視口分爲佈局視口(layout viewport)、視覺視口(visual viewport)和理想視口(ideal viewport)。

佈局視口

爲了容納爲桌面瀏覽器設計的網站，移動設備默認的佈局視口寬度遠大於屏幕的寬度，設置爲980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因爲瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。document.documentElement.clientWidth/Height返回的是佈局視口的尺寸

視覺視口

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

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

[注意]當用戶縮放時，只有視覺視口的尺寸會發生改變，佈局視口不會改變。移動端的縮放不會導致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>

理想視口

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

只有主動地往頁面裏添加meta視口標籤時理想視口才會生效。如果沒有meta視口標籤聲明，那麼佈局視口將會維持它的默認寬度，理想視口只有當顯式地使用它的時候纔會產生影響

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

定義理想視口是瀏覽器的工作，而不是設備或操作系統的工作。

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

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

meta視口

meta視口標籤存在的主要目的是讓佈局視口的尺寸和理想視口的尺寸匹配。

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

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

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

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

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

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

initial-scale

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

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

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

【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">

總結

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