【移動端 Web】怎麼按部就班地開發一個移動端頁面
1. 移動頁面開發基礎css
1.1 像素——什麼是像素html
像素是 Web 頁面佈局的基礎，那麼到底什麼纔是一個像素呢？前端
像素：一個像素就是計算機屏幕所能顯示一種特定顏色的最小區域。這是像素的概念，實際上，Web 前端開發領域，像素有如下兩層含義：android
(1) 設備像素：設備屏幕的物理像素，對於任何設備來說物理像素的數量是固定的。ios
(2) CSS像素：這是一個抽象的概念，它是爲 Web 開發者建立的。web
以下圖，是在縮放比例爲1，即 scale = 1 的狀況下，設備像素和CSS像素示意圖：api
咱們再來考慮這樣一個問題：當咱們給一個元素設置了 width:200px; 這條樣式時，到底發生了什麼？瀏覽器
當咱們給元素設置了 width:200px 時，這個元素的寬度跨越了200個CSS像素。可是它並不必定跨越了200個設備像素，至於會跨越多少個設備像素，就取決於手機屏幕的特性和用戶的縮放，舉個例子：微信
蘋果手機的視網膜屏幕，是一個高密度屏幕，它的像素密度是普通屏幕的兩倍，因此當咱們設置 width:200px;時，200個CSS像素跨越了400個設備像素，以下圖：app
若是用戶縮小頁面，那麼CSS像素會明顯小於一個設備像素，這個時候 width:200px; 這條樣式中所設置的200個CSS像素跨越不了200個設備像素，以下圖：
讓咱們簡單總結下：
○ Web前端領域，像素分爲設備像素和CSS像素
○ 一個CSS像素的大小是可變的，好比用戶縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設備像素不管大小仍是數量都是不變的。
1.2 移動端的三個視口
咱們應該都寫過這樣的樣式：width:25%; 可是咱們在給一個元素加上這樣的樣式以後發生了什麼呢？咱們都知道：一個塊元素默認的寬度時父元素的100%，是基於父元素的，因此這裏的25%指的是父元素寬度的25%，因此 body 元素的默認寬度時 html 元素的100%，那麼 html元素又是基於誰的呢？這就要引出一個概念：初始包含塊和視口。
1.2.1 第一個視口：佈局視口
首先，咱們須要瞭解一件事情：
瀏覽器廠商是但願知足用戶即便在移動端，例如手機上也能瀏覽爲PC端設計的網站，因此瀏覽器廠商必須想辦法來知足這個需求。
在PC端瀏覽器中，視口只有一個，而且視口的寬度 = 瀏覽器窗口的寬度，可是在移動端也要根據這個來設計的話，那麼PC端設計的網站會很醜，由於PC端的網頁寬度有 800 以上個CSS像素。而手機屏幕要窄不少，這個時候在PC端25%的寬度在移動端看起來會很窄。因此，佈局視口的概念產生了。
佈局視口：移動端CSS佈局的依據視口，即CSS佈局會根據佈局視口來計算。
也就是說：在移動端，視口和瀏覽器窗口將再也不關聯。實際上，佈局視口要比瀏覽器窗口大得多（在手機或平板中瀏覽器佈局視口的寬度在768~1024像素之間），佈局視圖和窗口的關係以下圖所示：
能夠經過如下 JavaScript 代碼獲取佈局視口的寬度和高度：
document.documentElement.clientWidth;
document.documentElement.clientHeight;
1.2.2 第二個視口：視覺視口
視覺視口，即用戶當前看到網站的區域，以下圖所示：
1.2.3 第三個視口：理想視口
前面提到過，佈局視口的寬度通常在 680~1024 像素之間，這樣可使得PC網站在手機中不被壓扁，可是這樣不理想。由於手機更適合窄的網站，換句話說，佈局視口並非最理想的寬度，因此就引入了理想視口。
理想視口，定義了視口的理想寬度，好比對應 iPhone 5來說，理想視口是 320*568。可是最終做用的仍是佈局視口，所以咱們的CSS是依據佈局視口計算的.
因此咱們能夠這樣理解視口：理想的佈局視口。下面這段代碼能夠告訴手機瀏覽器要把佈局視口設置爲理想視口：
<meta name="viewport" content="width=device-width" />
這段代碼告訴瀏覽器：將佈局視口的寬度設爲理想視口。因此，上面的代碼中的 width 指的是佈局視口的寬， device-width 實際上就是理想視口的寬度。
好了，移動端的三個視口介紹完了，咱們總結下：
○ 在PC端，佈局視圖就是瀏覽器窗口
○ 在移動端，視口被分爲兩個：佈局視口、視覺視口
○ 移動端還有一個理想視口，它是佈局視口的理想尺寸，即理想的佈局視口。（PS:理想視口的尺寸設備因設備和瀏覽器的不一樣而不一樣）
○ 能夠將佈局視口的寬度設爲理想視口
1.3 設備像素比(DPR)
下面還需瞭解一個概念：設備像素比（Device Pixel Ratio，簡稱 DPR）。
下面的是設備像素比的計算公式，公式成立的前提是：（縮放比例爲1）
設備像素比（DPR） = 設備像素個數 / 理想視口CSS像素個數（device-width*device-height）
與理想視口同樣，設備像素比對於不一樣的設備是不一樣的，可是他們都是合理的，好比早期 iPhone的設備像素是320px，理想視口也是320px，因此早期 iPhone 的 DPR = 1 。然後來 iPhone 的設備像素爲 640px，理想視口仍是320px，因此後來 iPhone 的DPR = 2 。
在開發中，打開瀏覽器的調試工具能夠看到設備像素比，以下圖（這裏是谷歌的開發者工具，縮放比例默認爲1）：
從上圖，咱們能夠獲取如下信息：
iPhone 7的理想視口是：375*667 <==> device-width = 375,device-height = 667
iPhone 7的像素比是：2
根據公式：設備像素比（DPR） = 設備像素比 / 理想視口CSS像素個數，可知 iPhone 7的設備像素爲 750*1334
1.4 縮放
在前面設備像素比公式的時候講到了其成立的前提是：縮放比例爲1。
從前面能夠了解到CSS像素的大小是可變，而縮放從技術實現的角度來說，就是放大和縮小CSS像素。
1.5 meta標籤
meta視口標籤存在的主要目的是爲了讓佈局視口和理想視口的寬度匹配，meta視口標籤應該放在 HTML文檔的 head 標籤內，語法以下：
<meta name="viewport" content="name=value,name=value" />
其中，content 屬性是一個字符串值，字符串是由逗號","分隔的"名/值"對組成，共有5個：
width：設置佈局視口的寬
init-scale：設置頁面的初始縮放程度
minimum-scale：設置了頁面最小縮放程度
maximum-scale：設置了頁面最大縮放程度
user-scalable：是否容許用戶對頁面進行縮放操做
下面是一個經常使用的 meta 標籤實例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
上面這行代碼的意思是：讓佈局視口的寬度等於理想視口的寬度，頁面的初始縮放比例以及最大縮放比例都爲1，且不容許用戶對頁面機芯縮放操做。
1.6 媒體查詢
媒體查詢是響應式設計的基礎，它有如下三點做用：
一、檢測媒體的類型，好比 screen，tv等
二、檢測佈局視口的特性，好比視口的寬高分辨率等
三、特性相關查詢，好比檢測瀏覽器是否支持某某特性（這一點不討論，由於它被目前瀏覽器支持的功能對於web開發來說很無用）
CSS 中使用媒體查詢的方法：
@media 媒體類型 and (視口特性閾值) { // 知足條件的CSS樣式代碼 }
下面是一段在CSS中使用媒體查詢的示例：
@media all and (min-width:321px) and (max-width:400px){ .box { background:red; } }
上面代碼中，媒體類型爲 all，表明任何設備，而且設備的佈局視口寬度大於等於321px且小於等於400px時，讓擁有 box 類的元素背景變紅。
2. 移動頁面開發進階
2.1 保持設備像素和CSS像素一致
那如何很好的開發一個移動端的頁面呢？咱們先從移動端的PSD設計稿件開始把。
移動端稿件尺寸和PC端的區別具體在設計圖的尺寸上。咱們以 iPhone 6的設計圖尺寸標準爲例：
這張設計圖很簡單，只有一個紅色方塊。咱們能夠直接就在編輯器上開始寫對應的代碼：
<!DOCTYPE html> <html> <head> <title>Red Box</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <style type="text/css"> body{ margin: 0;padding: 0;} .red_box{ width: 200px;height: 200px;background: red;} </style> </head> <body> <div class="red_box"></div> </body> </html>
這代碼貌似沒啥問題，但運行後才發現不是想要的結果：
從效果圖能夠看到問題，紅色方塊與整個頁面的比例和PSD原稿不同。
那爲何咱們按原稿測量的尺寸寫出來的代碼效果卻和PSD原稿顯示的不同呢？這是由於PSD原稿的尺寸是按照設備像素設計的，因此咱們設計稿的尺寸就是iPhone 6的設備像素的尺寸，也就是 750px，而咱們CSS中的樣式是基於佈局視口的尺寸計算的，因爲HTML頁面中因爲寫入瞭如下meta標籤：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
在前面講過，width=width-device 這段代碼是讓佈局視口的尺寸等於理想視口的。
根據公式（縮放比例爲1）：設備像素比 = 設備像素個數 / 理想視口像素個數，iPhone 6的設備像素比爲2，設備像素爲750，可得其理想視口尺寸爲375px，從開發者工具上也能夠明顯看出。而咱們CSS中的樣式是基於佈局視口計算的，故顯示的效果不一樣。
據此，咱們須要修改紅色方塊的寬高，把原稿的寬高除以設備像素比，獲得新的寬高爲100px，效果圖以下：
這裏顯示效果和PSD原稿一致。
可是，問題來了！若是咱們在作頁面的時候，測量了一個元素的寬度，寬度是一個奇數，好比111px。按照前面的說明，咱們將測量到的數值除以2，獲得的是55.5px。可是，手機沒辦法顯示不到一個像素的像素值，會自動補全一個像素後進行顯示，最終會將元素顯示爲56px，這並非咱們想要的結果。
另外，這裏咱們除以2，是由於 iPhone 6的設備像素比是2，但不是全部的移動設備的設備像素比都是2，而且不一樣設備的設備像素也不同，這就致使了理想視口的尺寸是不同的。因此，咱們直接根據咱們iPhone 6的設計稿得來的尺寸除以設備像素比2用來編寫CSS是不能在全部設備下無缺顯示的。
所以，咱們要換一個方法。
若是咱們能將佈局視口的尺寸設置爲和設備像素尺寸相等的話，這樣咱們就保證了設計圖與頁面的1:1的關係，能夠直接使用PSD原稿中測量的尺寸，而後在其餘尺寸手機中進行等比例縮放就能夠了。
那麼，咱們如何才能讓佈局視口的尺寸等於設備像素的尺寸呢？
咱們注意到 meta 標籤中這段代碼： width=device-width，這是聲明讓佈局視口尺寸等於理想視口的尺寸。
根據公式（縮放比例爲1）：設備像素比（DPR）= 設備像素個數 / 理想視口像素個數（device-width）
以 iPhone 6爲例：
設備像素比（DPR）：2
設備像素個數：750
因此，在縮放比例爲1的狀況下，iPhone 6理想視口的設備像素個數爲 750 / 2 = 375，即對於 iPhone 6來講，device-width = 375 。
咱們經過 width=device-width 這行代碼，間接地將佈局視口的尺寸設爲了 375。
一樣，咱們能改變理想視口的尺寸，也就改變了佈局視口的尺寸。
那如何改變理想視口的尺寸呢？這就要用到縮放了。
前面有簡單講到，縮放就是縮小或放大CSS像素的過程，以 iPhone 6爲例，當縮放比爲1:1時，因爲iPhone 6的DPR爲2，因此iPhone的設備像素與CSS像素的關係就像下圖同樣：
一個CSS像素寬度等於兩個設備像素寬度，因此750px的設備寬度的佈局視口爲375 CSS像素。
這是在縮放比例爲1的狀況下，既然能夠放大或縮小CSS像素，因此若是咱們將CSS像素的寬度縮放至與設備像素寬度相等了，那麼750個設備像素也就能顯示750個CSS像素，縮放後的設備像素與CSS像素看起來以下圖同樣：
可是，咱們的縮放倍數是多少呢？在縮放比例爲1時，一個CSS像素的寬度 = 兩個設備像素的寬度。
若是咱們想讓一個CSS像素的寬度 = 一個設備像素的寬度，咱們就要將CSS像素縮小爲原來的 0.5倍。
實際上，咱們縮小的倍數 = 設備像素比的倒數。
這樣，咱們在不改變原稿的樣式的狀況下，修改前面HTML代碼以下：
<!DOCTYPE html> <html> <head> <title>Red Box</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <style type="text/css"> body{ margin: 0;padding: 0;} .red_box{ width: 200px;height: 200px;background: red;} </style> </head> <body> <div class="red_box"></div> </body> </html>
運行後，會發現現實效果和設計稿徹底一致。
可是，這裏有個前提：那就是縮放 0.5倍只適用於設備像素比爲 2的設備（由於縮放值 = 1 / 設備像素比）。
所以，爲了適應全部設備，咱們能夠經過 JavaScript 代碼動態生成 meta 標籤：
var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
其中， window.devicePixelRatio 的值爲設備像素比。
因而，咱們的HTML代碼變成這樣：
<!DOCTYPE html> <html> <head> <title>Red Box</title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style type="text/css"> body{ margin: 0;padding: 0;} .red_box{ width: 200px;height: 200px;background: red;} </style> </head> <body> <div class="red_box"></div> <script> var scale = 1 / window.devicePixelRatio; document .querySelector('meta[name="viewport"]') //獲取 name爲 viewport的 meta元素 // 設置 content屬性 .setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); </script> </body> </html>
這樣就保證了，在任何設備下，佈局視口的寬度老是等於設備像素。
咱們來簡單的作下對比，下面兩張圖片分部是HTML代碼在模擬器 Nexus 5X 和 iPhone X 下的顯示狀況：
從圖片中能夠看到，即便設備變了，設備像素變了，DPR變了，紅色方塊的大小也沒有改變，都是100px 。
可是，這樣頁面的元素就不成比例，會影響到總體佈局。
咱們須要讓頁面元素跟着設備的變化等比縮放。而這就是咱們要解決的第二個問題。
那怎麼實現呢？這就須要講到 rem 了。
2.2 rem
什麼是 rem 呢？
rem 是相對尺寸單位，相對於 html 標籤字體大小的單位，舉個例子：、
若是 html 的 font-size 爲18px，那麼 1rem = 18px。
須要記住的是， rem 是基於 html 標籤的字體大小的。
很顯然，咱們須要把以前用 px 做爲元素尺寸的單位換成 rem。
由於 rem 是根據 html 標籤的 font-size值肯定的，咱們只要肯定 html標籤的 font-size值就好了。
咱們先假定一個標準，就是讓font-size的值等於設備像素的十分之一，即：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
以 iPhone 6爲例，html 標籤的 font-size 的值就等於 750 / 10 = 75px ，紅色方塊 200px 換算爲 rem 單位就是 200 / 75 = 2.6666667 rem。
若是以 iPhone 5爲例，其設備像素爲 640，font-size 則爲 640 /10 = 64px，即 1rem = 64px。因此，在 iPhone 6中顯示爲 200px 的元素在 iPhone 5中會顯示爲 2.6666667 * 64 px。
這樣，在不一樣設備中就實現了讓元素等比縮放，不會影響總體佈局。
PS：作頁面的時候文字字體大小不要用 rem 換算，仍是使用 px 作單位。
簡單總結下如今瞭解的方法：
(1) 將佈局視口大小設爲設備像素尺寸
var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
(2) 動態設置 html 字體大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
(3) 將設計圖中的尺寸換算成 rem
元素的 rem 尺寸 = 元素 PSD 稿件測量的像素尺寸 / 動態設置的 html 標籤的 font-size 值
根據前面的說明，咱們能夠獲得一個 HTML 頁面模板：
<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> </head> <body> <script> var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
根據模板，修正前面的 HTML 代碼以下:
<!DOCTYPE html> <html> <head> <title>Red Box</title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style type="text/css"> body{ margin: 0;padding: 0;} .red_box{ width: 2.66666667rem;;height: 2.66666667rem;;background: red;} </style> </head> <body> <div class="red_box"></div> <script> var scale = 1 / window.devicePixelRatio; document .querySelector('meta[name="viewport"]') //獲取 name爲 viewport的 meta元素 // 設置 content屬性 .setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); // 設置頁面的的 font-size 值 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
如今，元素就能夠根據手機尺寸的不一樣等比縮放了。
可是，這個方法有個缺點。第一，轉化爲 rem 單位時，須要除以 font-size 的值，這個值可很差算，還須要計算器來完成，影響開發效率。第二，在轉爲 rem 單位還會遇到除不盡的數，例如以前的例子中的 2.6666667rem，可能會使頁面元素尺寸有誤差。
上面作頁面的思路是：
拿到設計圖，好比 iPhone 6的設計圖，就將瀏覽器設置 iPhone 6設備調試，而後用 JavaScript 動態修改 meta 標籤，使佈局視口的尺寸等於設計圖尺寸，也就是設備像素尺寸，而後使用 rem 替代 px 做爲尺寸單位，使得頁面在不一樣設備中等比縮放。
如今，假如咱們不去修改 meta 標籤，正常使用縮放比爲 1:1 的 meta 標籤，即便用如下 meta 標籤：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
繼續以 iPhone 6爲例，根據公式（縮放比爲1）：設備像素比 = 設備像素個數 / 理想視口像素個數。
咱們知道：
設備像素 = 設計尺寸 = 750px
佈局視口 = 375px
假設咱們以 iPhone 6設計圖尺寸爲標準，在設計圖的尺寸下設置一個 font-size 值爲 100px。
也就是說：750px 寬的頁面，咱們設置 100px的 font-size 值，那麼頁面的寬度換算爲 rem 就等於 750 / 100 = 7.5 rem 。
咱們就以頁面總寬度爲 7.5 rem 位標準，那麼在佈局視口中，也就是頁面總寬爲 375px下，font-size 值應該是多少？很簡單： font-size = 375 / 7.5 = 50px 。
以下在 iPhone 5 下呢？由於 iPhone 5的佈局視口寬度爲 320px，因此若是頁面總寬以 7.5 爲標準，那麼 iPhone 5下咱們設置的 font-size 值是： 320 / 7.5 = 43.6666667px 。
也就是說，無論在什麼設備下，咱們均可以把頁面的總寬度設爲一個以 rem 爲單位的定值，好比本例就是 7.5 rem，只不過咱們須要根據佈局視口的尺寸動態設置 font-size 的值：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
這樣，不管在什麼設備狀況下，咱們頁面的總寬度都是 7.5 rem。所以，咱們直接在設計圖上測量 px單位的尺寸，而後除以 100轉換成 rem 單位就是 200/100 = 2rem。
由於在不用設備下咱們動態設置了 html 標籤的 font-size 值，因此不一樣設備下相同的 rem 值對應的像素值是不一樣的。這樣就實現了在不一樣設備下等比縮放。
咱們修改 html 代碼以下：
<!DOCTYPE html> <html> <head> <title>Red Box</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> body{ margin: 0;padding: 0;} .red_box{ width: 2rem;;height: 2rem;background: red;} </style> </head> <body> <div class="red_box"></div> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>
刷新頁面，在不一樣設備下調試能夠發現實現了咱們想要的效果：等比縮放。
咱們簡單總結下第二種作法：
(1) 拿到設計圖，計算出頁面的總寬，爲了方便計算，取 100px的 font-size，。若是設計圖是 iPhone 6，那麼計算出的就是 7.5rem；若是是 iPhone 5，就是 6.4 rem
(2) 動態設置 html標籤的 font-size 值：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem爲單位的頁面總寬 + 'px';
例如 iPhone 6就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
iPhone 5就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
(3) 做頁面是測量設計圖的 px尺寸除以 100獲得 rem尺寸
(4) 注意文字字體大小不要使用 rem 換算
對應的 HTML代碼模板以下：
<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>
因爲這種作法在開發中換算 rem 單位時只須要將測量的尺寸除以100便可，因此不須要使用計算器來完成計算轉換，能夠提高開發效率。
另外，不管是哪一種作法，文字字體大小都不要換算成 rem 單位，而是使用媒體查詢來進行動態設置，好比如下的網易代碼：
@media screen and (max-width: 321px) { body,header,footer { font-size:16px } } @media screen and (min-width: 321px) and (max-width:400px) { body,header,footer { font-size:17px } } @media screen and (min-width: 400px) { body,header,footer { font-size:19px } }
咱們總結下其在文字字體大小上的作法，在媒體查詢階段，分爲三個等級：
321px如下；321px - 400px之間；400px以上。
具體文字大小要多少像素這個以設計圖爲準。
可是，這三個等級之間是有規律的。仔細觀察，能夠發現321px如下的屏幕字體大小比321px - 400px之間的屏幕字體大小要小一個像素，而321px - 400px之間的屏幕字體大小要比400以上屏幕字體大小要小2個像素。依照這個規律，咱們根據設計圖所在的像素區段先寫好該區段的字體大小，而後分別寫出另外兩個區段的字體大小媒體查詢代碼就能夠了。
3. 移動端頁面開發資源總結及技巧
3.1 meta標籤相關知識
(1) 移動端頁面設置視口寬度等於設備寬度，並禁止縮放：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
(2) 移動端頁面設置視口寬度等於定寬（如640px），並禁止縮放，經常使用於微信瀏覽器頁面：
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
(3) 禁止將頁面中的數字識別爲電話號碼:
<meta name="format-detection" content="telephone=no" />
(4) 忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
(5) 當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本之後，safari上已看不到效果 -->
(6) 將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent -->
能夠獲得 viewport 模板以下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>title</title> <link rel="stylesheet" href="index.css"> </head> <body> content... </body> </html>
3.2 CSS樣式技巧
(1) 禁止ios和android用戶選中文字：
.css{-webkit-user-select:none}
(2) 禁止ios長按時觸發系統的菜單，禁止ios&android長按時下載圖片：
.css{-webkit-touch-callout: none}
(3) webkit去除表單元素的默認樣式：
.css{-webkit-appearance:none;}
(4) 修改webkit表單輸入框placeholder的樣式
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
(5) 去除android a/button/input標籤被點擊時產生的邊框 & 去除ios a標籤被點擊時產生的半透明灰色背景：
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
(6) ios使用-webkit-text-size-adjust禁止調整字體大小：
body{-webkit-text-size-adjust: 100%!important;}
(7) android 上去掉語音輸入按鈕：
input::-webkit-input-speech-button {display: none}
(8) 移動端定義字體，移動端沒有微軟雅黑字體：
/* 移動端定義字體的代碼 */ body{font-family:Helvetica;}
(9) 禁用Webkit內核瀏覽器的文字大小調整功能：
-webkit-text-size-adjust: none;
(10) 去掉 input[type=search] 搜索框默認的叉號
input[type="search"]{ -webkit-appearance:none; } input::-webkit-search-cancel-button { display: none; }
3.3 其餘技巧
(1) 手機拍照和上傳圖片
<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">
(2) 取消input在ios下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
(3) 打電話和發短信
<a href="tel:0755-10086">打電話給:0755-10086</a> <a href="sms:10086">發短信給: 10086</a>
3.4 CSS reset
/* hcysun */ @charset "utf-8"; /* reset */ html{ -webkit-text-size-adjust:none; -webkit-user-select:none; -webkit-touch-callout: none font-family: Helvetica; } body{font-size:12px;} body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;} a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;} em{font-style:normal} li{list-style:none} a{text-decoration:none;} img{border:none; vertical-align:top;} table{border-collapse:collapse;} textarea{ resize:none; overflow:auto;} /* end reset */
3.5 經常使用公用CSS style
/* public */ /* 清除浮動 */ .clear { zoom:1; } .clear:after { content:''; display:block; clear:both; } /* 定義盒模型爲怪異和模型（寬高不受邊框影響） */ .boxSiz{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* 強制換行 */ .toWrap{ word-break: break-all; /* 只對英文起做用，以字母做爲換行依據。 */ word-wrap: break-word; /* 只對英文起做用，以單詞做爲換行依據。*/ white-space: pre-wrap; /* 只對中文起做用，強制換行。*/ } /* 禁止換行 */ .noWrap{ white-space:nowrap; } /* 禁止換行,超出省略號 */ .noWrapEllipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 多行顯示省略號，less寫法，@line是行數 */ .ellipsisLn(@line) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line; } /* 1px 邊框解決方案，示例中設置上邊框，能夠調整 top、right、bottom、left 的值分別設置上下左右邊框 */ #box2:after{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #000; color: #C7C7C7; transform-origin: 0 0; transform: scaleY(0.5); } /* 文字兩端對齊 */ .text-justify{ text-align:justify; text-justify:inter-ideograph; } /* 定義盒模型爲 flex佈局兼容寫法並讓內容水平垂直居中 */ .flex-center{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center; } /* public end */
3.6 flex佈局
(1) 定義彈性盒模型兼容寫法
/* box inline-box */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box;
(2) box-orient 定義盒模型內伸縮項目的佈局方向
/** * vertical column 垂直 * horizontal row 水平 默認值 */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-flex-direction: row; -o-box-orient: horizontal; box-orient: horizontal;
(3) box-direction 定義盒模型內伸縮項目的正序(normal默認值)、倒敘(reverse)
/* Firefox */ display:-moz-box; -moz-box-direction:reverse; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-direction:reverse;
(4) box-pack 對盒子水平富裕空間的管理
/* start end center justify */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center;
(5) box-pack 對盒子垂直方向富裕空間的管理
/* start end center */ /* box-align */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center;
(6) 定義伸縮項目的具體位置
/*-moz-box-ordinal-group:1;*/ /* Firefox */ /*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */ .box div:nth-of-type(1){-webkit-box-ordinal-group:1;} .box div:nth-of-type(2){-webkit-box-ordinal-group:2;} .box div:nth-of-type(3){-webkit-box-ordinal-group:3;} .box div:nth-of-type(4){-webkit-box-ordinal-group:4;} .box div:nth-of-type(5){-webkit-box-ordinal-group:5;}
(7) 定義伸縮項目佔空間的份數
-moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ .box div:nth-of-type(1){-webkit-box-flex:1;} .box div:nth-of-type(2){-webkit-box-flex:2;} .box div:nth-of-type(3){-webkit-box-flex:3;} .box div:nth-of-type(4){-webkit-box-flex:4;} .box div:nth-of-type(5){-webkit-box-flex:5;}
來源：
- 1. 開發移動端頁面
- 2. 移動端頁面開發
- 3. 前端按部就班 - 仿京東 Web 移動端首頁（簡易版）
- 4. 移動前端 web頁面
- 5. 移動端WEB頁面
- 6. 移動端開發demo—移動端web相冊（一）
- 7. 移動端頁面
- 8. 移動端web開發
- 9. 移動端web開發2
- 10. 移動端Web開發
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • Maven 自動化部署 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. 開發移動端頁面
- 2. 移動端頁面開發
- 3. 前端按部就班 - 仿京東 Web 移動端首頁（簡易版）
- 4. 移動前端 web頁面
- 5. 移動端WEB頁面
- 6. 移動端開發demo—移動端web相冊（一）
- 7. 移動端頁面
- 8. 移動端web開發
- 9. 移動端web開發2
- 10. 移動端Web開發