H5深度剖析

前言：

   當代是手機市場的時代，因此手機端的需求比較大。在各大招聘網站上的公司，對前端人員的技術要求大多都有移動端H5開發。因此學習移動端H5開發對於一個前端開發人員來講是十分重要的。

先說幾個概念：

一、物理像素（設備像素）

屏幕的物理像素，又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。任何設備屏幕的物理像素出廠時就肯定了，且固定不變的。

二、設備獨立像素

設備獨立像素也稱爲密度無關像素，能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。

三、設備像素比

設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係

設備像素比 ＝ 物理像素 / 設備獨立像素
以iphone6爲例：
iphone6的設備寬和高爲375pt * 667pt，能夠理解爲設備的獨立像素，而其設備像素比爲2.固有設備像素爲750pt * 1334pt

以上是概念，如今來解釋一下具體是什麼：

  物理像素就是你屏幕上的像素點，能夠把他理解成一個很小很小的小燈泡，你的電腦顯示屏就是特別特別多的小燈泡排列而成的，在頁面顯示的時候每個小燈泡都顯示着各自的顏色，全部的小燈泡加起來就造成了你看到的畫面。那麼dpr呢？其實也很簡單，在咱們的電腦屏幕上1物理像素等於1px，也就是一個小燈泡等於1px,可是移動端1物理像素不必定等於1px,由於在移動端對畫面的要求比較高，要求畫面要更細膩，此時若是在一個dpr=2的手機上設置一個元素的長度是1px，那麼他的真實長度是2物理像素，及兩個小燈泡。(此處本人如此理解，若是有誤你們能夠指出。)

正文：

 有了以上概念的基礎咱們能夠進入正式的H5深度剖析了

一：meta 標籤講解

在之前移動手機並不廣泛的時候，若是你在手機上打開一個電腦上的網頁，你會發現你所看到的是一個縮小版的電腦網頁，他顯示的很全，但只是縮小了而已，這樣雖然能適應之前的手機端，可是隨着社會的發展，「用戶體驗」這個詞開始出現，因此傳統的方案就沒法生效了，咱們所須要的是一個在手機上完美顯示的網頁。網頁的寬度就是手機的寬度，在這裏就須要設置meta標籤了：

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

上面的意思就是：視覺視口 = 屏幕寬度 （這裏有設計到佈局視口，視覺視口和理想視口的概念，這裏就不進行講解了，太多了，有興趣的能夠去了解一下）

meta的其餘屬性含義：

• name="viewport" :視口
• width=device-width ：屏幕的寬度=設備的寬度
• user-scalable=no ：是否容許用於縮放
• initial-scale=1.0 ：初始縮放值1:1
• maximum-scale=1.0 ：最大的縮放值1:1
• minimum-scale=1.0" : 最小的縮放值1:1

下面附上移動端meta的基本配置：

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

 

二：移動端適配方案

     咱們都知道不一樣於pc端的開發，移動端開發並不用去適配瀏覽器，由於移動端手機瀏覽器的內核幾乎都是Google的內核，並且Google不像某些瀏覽器（看誰呢！說的就是你，ie），並無不少坑，因此你徹底不用去考慮瀏覽器的兼容問題。開心不！but！你要去適配各類手機不一樣大小的屏幕，要保證不管在大到ipad，小到iphone4s，都要保證他的樣式不跑，都完美的顯示(用戶體驗比天高)。試想若是一張圖片,要在一個500px和一個1000px的佈局上都鋪滿寬度怎麼辦？很簡單，設置成100%就能夠了。沒錯移動端的適配就是採用的這種思想，不管屏幕大小如何變化，其元素在這個屏幕大小下所佔有的百分比是不會發生變化的。

    此處咱們採用的是淘寶的適配方案，也就是rem。淘寶官方提供了一個計算rem也就是百分比的js腳本供咱們使用，這個腳本會每次經過獲取你屏幕的寬度幫你算出1rem及1%寬度，這時咱們只須要採用把原來的px換成百分比就好了。最近還出了一個vw的適配方案，不過本身沒了解，之後學習以後在加上。

下面附上rem腳本的一個github地址，有須要的童鞋能夠去看一看：

  https://github.com/chengjs/rem

在附上flexible.js的源碼：

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

 

三：移動端事件

在移動端，咱們傳統的電腦端的事件有些是不太好用的，畢竟移動端可沒有鼠標，因此一些事件是不太同樣的，這裏附上移動端的一些經常使用事件：

tap: 手指碰一下屏幕會觸發
swipeLeft：手指在屏幕上向左滑動時會觸發
swipe：手指在屏幕上滑動時會觸發
click：單擊事件，相似於PC端的click，但在移動端中，連續click的觸發有200ms ~ 300ms的延遲
swipeDown：手指在屏幕上向下滑動時會觸發
swipeUp：手指在屏幕上向上滑動時會觸發
longTap: 手指長按屏幕會觸發
touchstart：手指觸摸到屏幕會觸發
touchmove：當手指在屏幕上移動時，會觸發
touchend：當手指離開屏幕時，會觸發
touchcancel：可由系統進行的觸發，好比手指觸摸屏幕的時候，忽然alert了一下，或者系統中其餘打斷了touch的行爲，則能夠觸發該事件
singleTap: 手指碰一下屏幕會觸發 doubleTap: 手指雙擊屏幕會觸發
swipeRight：手指在屏幕上向右滑動時會觸發

 

四：移動端常見問題

1：利用meta標籤對viewport進行控制（這個必須加，否則在電腦上沒問題的佈局到手機端就會出現問題）：

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

2.刪除默認的蘋果工具欄和菜單欄：

<meta name="apple-mobile-web-app-capable" content="yes">

3.禁止了把數字轉化爲撥號連接：

<meta name="format-detection" content="telephone=no"> 在iPhone上默認將電話號碼變爲超連接（藍色字體）而且點擊這個數字還會自動撥號

4.ios click點擊事件延時300ms

5.移動端如何定義字體font-family

更多問題

 

五：響應式與自適應的區別

 關於自適應和響應式我翹來一張圖，我以爲很清楚明瞭：

 說白了響應式就是在不一樣屏幕下顯示不一樣的網頁佈局，以此來適應不一樣的屏幕大小。說到響應式就不得不說一個框架了（其實並不能說是一個框架，至關於一個庫），那就是BootStrap。我以爲除了像淘寶京東這樣的一些大廠覺得，其餘大部分的響應式頁面應該都是經過BootStrap去實現的，具體感興趣的童鞋能夠去了解一下。

 那麼響應式佈局的原理究竟是什麼呢！是媒體查詢：@media。經過@media咱們去寫幾套css樣式去供不一樣的屏幕使用，手機端使用手機端的樣式，電腦端顯示電腦端的樣式，平板上顯示平板上的樣式。

自適應就明瞭多了，就是隻有一個佈局，只寫一套樣式，可是這套樣式和佈局在不一樣屏幕大小下都顯示的十分好，而且不會跑偏。咱們上面所說的rem的適配方案就屬於自適應。

 

總結：以上就是我所理解的移動端的H5了，之後若是有新的理解會進行補充，若是哪裏寫的不對的話，但願你們可以指出，感謝。