手機端屏幕自適應（二）

時間 2019-11-20

標籤手機屏幕自適應欄目 CSS 简体版

原文原文鏈接

1、什麼是Viewport

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。css

2、Viewport 基礎

一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：html

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放web

3、css像素、設備獨立像素、設備像素

概念

CSS像素（CSS Pixel）：適用於web編程，指的是咱們在樣式代碼中使用到的邏輯像素，是一個抽象概念，實際並不存在編程

設備獨立像素（Device Independent Pixel）：與設備無關的邏輯像素，表明能夠經過程序控制使用的虛擬像素，是一個整體概念，包括了CSS像素瀏覽器

設備像素（Device Pixel）：物理像素，設備能控制顯示的最小單位，咱們常說的1920×1080像素分辨率就是用的設備像素單位iphone

關係

PC端 —— 1個設備獨立像素 = 1個設備像素（在100%，未縮放的狀況下，若是縮放到200%能夠說1個設備獨立像素 = 2個設備像素）佈局

移動端 —— 根據設備不一樣有很大的差別，根據 ppi 不一樣咱們能夠獲得不一樣的換算關係，標準屏幕（160ppi）下 1個設備獨立像素 = 1個設備像素測試

dpr（device pixel ratio）：設備像素比，設備像素/設備獨立像素，表明設備獨立像素到設備像素的轉換關係，在JS中能夠經過 window.devicePixelRatio 獲取字體

當設備像素比爲1:1時，使用1（1×1）個設備像素顯示1個CSS像素；

當設備像素比爲2:1時，使用4（2×2）個設備像素顯示1個CSS像素；

當設備像素比爲3:1時，使用9（3×3）個設備像素顯示1個CSS像素。

而最後說一下，咱們在移動端頁面開發中嘗試用到元信息配置<meta name="viewport" width="device-width">，添加這段代碼後咱們發現以前縮放的頁面被放大了

其實它的含義就是將視口設置爲：CSS像素=設備像素，即咱們在頁面中設置的1個CSS像素大小就等價於1個設備像素大小，在PC上看不到效果，但在移動端頁面開發中咱們就能看到很大的差別。

4、理解viewport與device-width

http://www.xiaocaoge.com/understanding-viewport-and-device-width.html

（1）先來理解兩個概念：device pixels與CSS pixels。

device pixels指設備的物理像素，在PC端就是你在操做系統裏設置的屏幕分辨率y，其值能夠經過screen.width/screen.height獲取。在移動端下面再說。

CSS pixels指在CSS文件中設置的字體大小、元素寬度等，如font-size: 14px; width: 100px; 。在PC端，瀏覽器縮放比例爲100%，也即默認狀況下，1 CSS pixel = 1 device pixel。

當你放大頁面到200%時，字體大小與元素寬度的像素值不會改變，是由於這些像素值是用CSS pixels表示的，實際上放大的是CSS pixels，此時 1 CSS pixel = 4 device pixels，高和寬都是200%。此時你獲取screen.width/screen.height的值，並無變化，而window.innerWidth和window.innerHeight的值變成了原來一半，是由於window.innerWidth/window.innerHeight的值也是用CSS pixels來表示的。

當你進行流式佈局時，會用百分比設置元素的寬度，好比一個塊級元素寬度爲10%，那麼你也知道10%其實是父級元素寬度的10%。可是你並無設置父級元素的寬度啊，好吧，你也知道父級元素的寬度與其父級元素寬度同樣（經過繼承得來，假設這些元素都是塊級元素）。而後向上到body元素的寬度，最終爲html元素的寬度，其值能夠經過document.documentElement.clientWidth獲取。那這個寬度怎麼來得呢？

（2）Viewport

viewport，翻譯爲視口，也便可視區域的大小，PC端經過window.innerWidth和window.innerHeight獲取。

html元素也即文檔的寬度，來自於viewport的寬度，在PC端要加上滾動條的寬度纔會與viewport的寬度同樣。所以，文檔的寬度最終來自於viewport的寬度，PC端經過window.innerWidth獲取。

（3）而在移動端，狀況將變得複雜。

首先，上面提到文檔的寬度來自於viewport的寬度，咱們把這個viewport稱爲layout viewport，由於它和佈局有關。在手機上面，由於手機的屏幕很小，當初iphone發佈時，爲了顯示完整的桌面網頁，就把給layout viewport設置了一個980px的值。手機上，能夠經過document.documentElement.clientWidth來獲取，我在安卓手機上測試也是980px。

可是這樣顯示網頁，那網頁的字體、元素都很小，小到打開這樣一個網頁，首先要作的就是放大頁面。爲了提升可讀性，Apple容許通meta標籤來設置layout viewport的寬度，也即文章開頭的那行代碼。

（4）device-width又是什麼呢

瀏覽器並無提供一個獲取device-width的屬性或方法，可是經過window.innerWidth能夠獲取，須要注意的是，必須添加文章開頭那行代碼才能夠跨瀏覽器獲取。若是不添加那行代碼，我本身在HTC G18/ Andoird OS 4.0.3中測試，自帶瀏覽器/UC9.6/QQ5.0能夠獲取，而在Chrome33和Opera20中經過screen.width能夠獲取。iPhone與iPad我沒測試。

舉個例子：

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue2-單一事件管理組件通訊</title>
    <script src="jquery-1.10.1.js"></script>
    <style>
        *{
            margin:0;
            padding:0
        }
    </style>
</head>
<body>
<div id="box"  style="width:64px;height: 64px;background-color: red">
    <span></span>
</div>
<script>
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue2-單一事件管理組件通訊</title>
    <script src="jquery-1.10.1.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        *{
            margin:0;
            padding:0
        }
    </style>
</head>
<body>
<div id="box"  style="width:64px;height: 64px;background-color: red">
    <span></span>
</div>
<script>
</script>
</body>
</html>