移動 Web入門前奏

liayal.com發表於2018-04-10
Web

　　從最早的IE6時代到現在的HTML5時代，前端的主戰場也從PC端轉移到了移動端。幾年前前端工程師還在為固定佈局和流動佈局打傷腦筋，而在如今的移動Web上我們可以使用彈性佈局輕易實現以前在Pc端的複雜佈局，甚至更強大的網格佈局也在Css下一版本的規範。移動web在將來的一段時間仍然是前端工程師的主戰場，本文將闡述一些移動web入門前需要了解的知識點。

　　畫素

　　畫素是網頁佈局的基礎，通常我們是這樣理解橡樹的的：一個畫素就是計算機螢幕能顯示一種特定顏色的最小區域。螢幕上的畫素越多。同一時間你可以看到的就越多。或者說，當裝置尺寸相同但畫素變得更密集時，螢幕能顯示的畫面的過過渡更細緻，網站看起來更明快。

　　看下面一段css:

.box {
width: 200px;
}

　　很多時候，我們會認為這個 200px 就是我們通常說的裝置200px，然而事實上並不是。這裡涉及到兩種畫素：

　　1.裝置畫素： 裝置螢幕的物理畫素，任何裝置的物理畫素的數量都是固定的。

　　2.CSS畫素：為web開發者創造的，在Css(和Javascript)中使用的一個抽象的層。

　　width: 200px;指定的是200Css畫素，而對應的裝置畫素取決於螢幕的畫素密度比（也就是DPR, 後面會提到）和縮放級別。畫素密度比越大，縮放級別越大，對應的裝置畫素也就越大，反之亦然。

　　一般情況下，我們只需關心Css畫素就可以，無需關心它的對應的裝置畫素。我們在Css 和Javascript程式碼中拿到的也基本上是Css畫素，除了 screen.width/height。

　　視口

　　在說視口之前，我們先來看一段程式碼：

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<style type="text/css">
.box {
width: 30%;
}
</style>
<body>
<div class="box">
This box‘s width is 30%;
</div>
</body>
</html>

　　這個很簡單是吧，只是建立了一個寬度為30%的div。那麼這個30%是根據什麼來計算的呢？這個問題也不難，相信每一個Web開發折都知道：當任何屬性使用百分比時，都是根據它的包含塊（父元素）的寬度來計算的。

　　上面的例子 .box 的包含塊是 body， 而 body 的包含塊是html。html和body都沒有定義寬度預設的就是100%了，那麼一般我們就粗略的認為 .box 的寬度就是瀏覽器視窗的寬度30%了。

　　實際上，這裡面我們都預設的忽略了一個點。回頭想一想，div的包含塊是body， body的包含塊是html，那麼html的包含塊是？ 它就是視口， 在Css標準中，它被稱為初始包含塊。初始包含塊是所有Css百分比寬度計算的根源，它給Css佈局限制了一個最大寬度。

在桌面瀏覽器上，視口的寬度與瀏覽器視窗的寬度一致。

　　在移動Web中我們通常會提到三種視口：

　　1.佈局視口：與移動瀏覽器視窗沒有關聯，寬度一般在768px~1024px（由瀏覽器廠商設定），常見寬度980px的視口。Css佈局會根據它來計算，並被他約束。

　　2.視覺視口：它是使用者正在看到的網站的區域。使用者可以通過縮放老操作視覺視口，但是不會影響到佈局視口。

　　3.理想視口：是對於特定裝置上的特定的瀏覽器的佈局視口的一個理想尺寸。理想視口由瀏覽器定義，因此同一裝置上的不同瀏覽器擁有不同的理想視口。理想視口需要開發者顯示使用：

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

移動端佈局視口比瀏覽器視窗要大

　　縮放

  • 縮放是一個放大或縮小Css畫素的過程。縮放會影響到頁面上的所有元素。

  • 縮放會影響桌面和手機的（視覺）視口的尺寸。

    視覺視口大小與縮放程度互逆

  • 縮放會影響桌面瀏覽器的佈局視口，但不會影響手機瀏覽器的佈局視口。

    在桌面瀏覽器，佈局視口和視覺視口是相同的。

  • 最後，不要禁止縮放

<meta name="viewport" content="user-scalable=no">

　　禁止縮放行為是邪惡的?。不是錯的❌，也不是愚蠢的，但是絕對的、不可寬恕的邪惡。

　　解析度

　　物理解析度（DPI）： 裝置每英寸的畫素點數。

　　裝置畫素比（DPR）： 裝置畫素個數和理想視口的比。

　　dppx和dpi：每一個畫素的點數。

  • dppx: JS中的window.devicePixelRatio和媒體查詢的device-pixel-ratio的單位。

實際使用的時候是不允許在後面加單位的。

if(window.devicePixelRatio) { 
// DPR大於等於2時執行 
}
@media all and((-webkit-min-device-pixel-ratio:2) { 
// DPR大於等於2時生效 
}
  • dpi: 用來代替dppx的，因為IE11及其一下版本不支援dppx。1dppx = 96dpi: 對應Css中的96個畫素;
@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) { 
// DPR大於等於2時生效 
}

　　meta視口

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

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

　　其中可用的name為：

  1. width：設定佈局視口的寬度為特定的值，device-width適用於大多數情況。

  2. initial-scale：設定頁面的初始縮放程度和佈局視口的寬度，一般設為1。使用initial-scale會將佈局視口尺寸設定為縮放後尺寸（副作用）。

    縮放程度是根據理想視口來計算的

  3. minimum-scale： 設定最小縮放程度（使用者可縮小的程度）

  4. maximum-scale： 設定最大縮放程度（使用者可放大的程度）
  5. user-scalable： 是否禁止使用者縮放。禁止縮放是邪惡的！

　　完美視口

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

　　媒體查詢：其實就是CSS的if語句

　　由於媒體查詢相關內容比較多，本文不做過多介紹，感興趣的戳我

　　媒體查詢與js屬性相對應：

  1. 佈局視口尺寸：document.documentElement.clientWidth/Height，被普遍支援;
  2. 視覺視口尺寸：window.innerWidth/Height，接近被普遍支援;
  3. 理想視口尺寸：screen.width/height，可能得到的是螢幕的裝置畫素尺寸，有嚴重的瀏覽器相容問題;
  4. 裝置螢幕比：window.devicePixelRatio;
  5. 螢幕方向：window.orientation。

　　本文只是選擇性的介紹了，移動web入門前需要了解的知識。移動端開發需要了解的東西還很多，需要大家去多多學習。

相關文章