H5深度剖析

前言：

當代是手機市場的時代，所以手機端的需求比較大。在各大招聘**上的公司，對前端人員的技術要求大多都有移動端h5開發。所以學習移動端h5開發對於乙個前端開發人員來說是十分重要的。

先說幾個概念：

1、物理畫素（裝置畫素）

螢幕的物理畫素，又被稱為裝置畫素，他是顯示裝置中乙個最微小的物理部件。任何裝置螢幕的物理畫素出廠時就確定了，且固定不變的。

2、裝置獨立畫素

裝置獨立畫素也稱為密度無關畫素，可以認為是計算機座標系統中的乙個點，這個點代表乙個可以由程式使用的虛擬畫素(比如說css畫素)，然後由相關系統轉換為物理畫素。

3、裝置畫素比

裝置畫素比簡稱為dpr，其定義了物理畫素和裝置獨立畫素的對應關係

裝置畫素比＝物理畫素 /裝置獨立畫素

以iphone6為例：

iphone6的裝置寬和高為375pt * 667pt，可以理解為裝置的獨立畫素，而其裝置畫素比為2.固有裝置畫素為750pt * 1334pt

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

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

正文：

有了以上概念的基礎我們可以進入正式的h5深度剖析了

一：meta 標籤講解

在以前移動手機並不普遍的時候，如果你在手機上開啟乙個電腦上的網頁，你會發現你所看到的是乙個縮小版的電腦網頁，他顯示的很全，但只是縮小了而已，這樣雖然能適應以前的手機端，但是隨著社會的發展，「使用者體驗」這個詞開始出現，所以傳統的方案就無法生效了，我們所需要的是乙個在手機上完美顯示的網頁。網頁的寬度就是手機的寬度，在這裡就需要設定meta標籤了：

"
viewport
" content="
width=device-width
">

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

meta的其他屬性含義：

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

"
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位址，有需要的童鞋可以去看一看：

在附上flexible.js的原始碼：

(function flexible (window, document) 
else
} setbodyfontsize();
//set 1rem = viewwidth / 10
function setremunit () 
setremunit()
//reset rem unit on page resize
window.addeventlistener('
resize
', setremunit)
window.addeventlistener(
'pageshow
', function (e) 
})//
detect 0.5px supports
if (dpr >= 2
) 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進行控制（這個必須加，不然在電腦上沒問題的布局到手機端就會出現問題）：

2.刪除預設的蘋果工具欄和選單欄：

在iphone上預設將**號碼變為超連結（藍色字型）並且點選這個數字還會自動撥號

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

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

更多問題

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

關於自適應和響應式我翹來一張圖，我覺得很清楚明了：

說白了響應式就是在不同螢幕下顯示不同的網頁布局，以此來適應不同的螢幕大小。說到響應式就不得不說乙個框架了（其實並不能說是乙個框架，相當於乙個庫），那就是bootstrap。我覺得除了像**京東這樣的一些大廠以為，其他大部分的響應式頁面應該都是通過bootstrap去實現的，具體感興趣的童鞋可以去了解一下。

那麼響應式布局的原理到底是什麼呢！是**查詢：@media。通過@media我們去寫幾套css樣式去供不同的螢幕使用，手機端使用手機端的樣式，電腦端顯示電腦端的樣式，平板上顯示平板上的樣式。

自適應就明了多了，就是只有乙個布局，只寫一套樣式，但是這套樣式和布局在不同螢幕大小下都顯示的十分好，並且不會跑偏。我們上面所說的rem的適配方案就屬於自適應。

總結：以上就是我所理解的移動端的h5了，以後如果有新的理解會進行補充，如果**寫的不對的話，希望大家能夠指出，感謝。

H5深度剖析

h5應用資料加密 H5定製開發方案

H5問題總結

h5離線應用

H5深度剖析

h5應用資料加密 H5定製開發方案

H5問題總結

h5離線應用

相關推薦