移動端開發-viewport與媒體查詢

首先要知道，在移動開發中，手機的瀏覽器會默認網頁是爲寬屏而設計的，它會縮小整個頁面來適應屏幕。

1. 不使用viewport出現的問題

提到響應式設計，你們首先想到的多是 Bootstrap ， @media 。

@media（媒體查詢）是CSS3的屬性，利用它能夠在不依賴其餘庫的狀況下實現響應式設計。示例代碼以下：

       @media screen and (min-width: 960px) {
          body { background-color: blue; }
        }

        @media screen and (max-width: 960px) and (min-width: 500px) {
          body { background-color: red; }
        }

        @media screen and (max-width: 500px) {
          body { background-color: yellow; }
        }

我在body里加了一段話，在PC端效果以下： 
開始： 

縮小瀏覽器窗口： 

再縮小瀏覽器窗口： 

我把這樣頁面放到服務器上，用個人手機訪問，個人手機屏幕寬度是414px。那麼這個頁面在我手機上應該是黃色。請看屏幕截圖： 

是藍色的。那麼問題來了，爲何媒體查詢失效了呢。這是因爲設備尺寸和Viewport尺寸不一致致使的。爲了解釋這個問題，首先咱們要理解移動設備上的1px ！= css中的1px。

2. css中的px與移動設備的px

在css中咱們通常使用px做爲單位，在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際狀況卻並不是如此，css中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理像素是不一樣的。影響css中px與設備px換算的因素主要有如下兩個：

• 設備尺寸
• 用戶縮放

設備尺寸 
iphone3的分辨率爲320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。從iphone4分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其餘設備相似。 
用戶縮放 
當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。你能夠想象，css中的px是一個一個小格子，在縮放頁面的時候，實際上是在縮放每一個小格子，而設備物理像素顯然是大小不變的。

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。css中的px就能夠看作是設備的獨立像素，因此經過devicePixelRatio，咱們能夠知道該設備上一個css像素表明多少個物理像素。在上面例子中增長js腳本：

window.alert(window.devicePixelRatio);

在PC端： 

在個人手機上： 

設備像素比是不一樣的。

3. 三種視口（viewport）

你可能覺得我囉嗦這麼多終於要進入正題了。咳咳，其實我仍是想讓你瞭解下面三個概念。若是你熟悉移動端開發，請跳過這節直接看4 ，若是你剛剛接觸移動端開發，我建議你讀下去，遲早你得了解。

3.1 佈局視口（layout viewport）

移動設備上的瀏覽器認爲本身必須能讓全部的網站都正常顯示，即便是那些不是爲移動設備設計的網站。但若是以瀏覽器的可視區域做爲viewport的話，由於移動設備的屏幕都不是很寬，因此那些爲桌面瀏覽器設計的網站放到移動設備上顯示時，必然會由於移動設備的viewport太窄，而擠做一團，甚至佈局什麼的都會亂掉。因此這些瀏覽器就決定默認狀況下把viewport設爲一個較寬的值，好比980px，這樣的話即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示了。這個寬度被稱爲佈局視口（layout viewport），能夠經過document.documentElement.clientWidth得到。

3.2 視覺視口（visual viewport）

雖然獨立佈局視口的創造很大程度地幫助了桌面網站到手機上的轉移，但咱們不能徹底無視移動端設備的屏幕尺寸。一些CSS聲明與用戶見到的東西有關，而與CSS的初始包含塊無關。而且，有時候知道用戶看到了網站的哪些部分對web開發者會有幫助。視覺視口是用戶正在看到的網站的區域，對於的javascript屬性是window.innerWidth. 
縮放會影響視覺視口的大小。當縮放程度是100%時，視覺視口與設備屏幕同樣寬。放大使視覺視口變得更小，由於屏幕上顯示的CSS像素更小了，而縮小會讓視覺視口更大，由於屏幕上的CSS像素更多了。所以縮放程度和視覺視口的大小是逆相關的：放得越大，視覺視口越小。 
注意：當用戶縮放時，只有視覺視口的尺寸會發生改變，佈局視口不會改變。移動端的縮放不會致使CSS佈局被從新計算。

3.3 理想視口（ideal viewport）

如今愈來愈多的網站都會爲移動設備進行單獨的設計，因此必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是，首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；第二，顯示的文字的大小是合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素像圖片什麼的也是這個道理。這個視口被稱爲理想視口（ideal viewport），這個尺寸是廠商肯定的。 
只有當網站是爲手機準備的時候才應該使用理想視口。只有主動地往頁面裏添加meta視口標籤時理想視口才會生效。若是沒有meta視口標籤聲明，那麼佈局視口將會維持它的默認寬度，理想視口只有當顯式地使用它的時候纔會產生影響：

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

3.4 測試三種視口

在head標籤中加入<meta name="viewport" content="width=device-width">，使佈局視口寬度等於理想視口寬度，加入下面js代碼進行測試。

   var ratio = window.devicePixelRatio;
    var layoutWidth = document.documentElement.clientWidth;
    var visualWidth = window.innerWidth;
    window.alert('devicePixelRatio: ' + ratio + ' || layout viewport: ' + layoutWidth + ' || visual viewport: ' + visualWidth);

PC端： 
 
手機： 

4 使用meta標籤控制viewport實現響應式設計

移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，咱們須要的是ideal viewport。那麼怎麼才能獲得ideal viewport呢？這就該輪到meta標籤出場了。

4.1 設置meta標籤

咱們在開發移動設備的網站時，最多見的的一個動做就是把下面這個東西複製到咱們的head標籤中：

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

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。meta標籤中共有6個關鍵字：

• width：能夠用width來設置viewport的寬度，以替代那些不合適的默認寬度。咱們能夠給其設定一個固定大小，但設定成device-width更加明智一些，這樣咱們能夠兼容不一樣大小的屏幕。
• height：同width
• initial-scale：控制默認的縮放比例，縮放是相對於ideal viewport來縮放的
• minimum-scale：這個是用戶能夠縮放頁面的最大比例
• maximum-scale：這個是用戶能夠縮放頁面的最小比例
• user-scalable：若是設置了user-scalable=no，用戶將沒法對頁面進行縮放

瞭解這些之後，咱們在測試例子中的head標籤中加入viewport，使理想視口寬度等於佈局視口寬度：

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

PC端網頁效果不變，手機端訪問效果： 
 
這是咱們想要的效果了。

4.2 動態改變meta標籤

第一種方法

可使用document.write來動態輸出meta viewport標籤，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二種方法

經過setAttribute來改變

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

 

參考：https://blog.csdn.net/qiqingjin/article/details/51539644