標籤：
目錄<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />忽略Android平台中對郵箱地址的識別
<meta name="format-detection" content="email=no" />當網站添加到主畫面快速啟動方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以後，safari上已看不到效果 -->將網站添加到主畫面快速啟動方式，僅針對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><link rel="stylesheet" href="index.css"></head><body>這裡開始內容</body></html>常見問題移動端如何定義字型font-family
中文字型使用系統預設即可，英文用Helvetica
/* 移動端定義字型的代碼 */body{font-family:Helvetica;}
參考《移動端使用字型的思考》
移動端字型單位font-size選擇px還是rem對於只需要適配手機裝置，使用px即可
對於需要適配各種行動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置
rem配置參考：
html {font-size:10px}@media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px }}@media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px }}@media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px }}@media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px }}@media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px }}@media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px }}@media screen and (min-width:1080px) { html { font-size: 32px }} 移動端touch事件
當使用者手指放在行動裝置在螢幕上滑動會觸發的touch事件
行動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。
以下是曆史原因，來源一個公司內一個同事的分享：
2007年蘋果發布首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器開啟一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個螢幕，但是字型、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。
雙擊縮放是指用手指在螢幕上快速點擊兩次，iOS 內建的 Safari 瀏覽器會將網頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點擊上，當使用者在螢幕上單擊某一個元素時候，例如跳轉連結<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定使用者是單純要點選連結還是要雙擊該部分地區進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點擊，則瀏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分地區頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對於web開發人員來說是，頁面js捕獲click事件的回呼函數處理，需要300ms後才生效，也就間接導致影響其他商務邏輯的處理。
解決方案：
1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick
解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應
什麼是Retina 顯示屏，帶來了什麼問題retina：一種具備超高像素密度的液晶屏，同樣大小的螢幕上顯示的像素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，像素點1個變為4個
在高清顯示屏中的位元影像被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍
那麼，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2
//例片寬高為：200px*200px，那麼寫法如下.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px
.css{font-size:20px}
參考《高清顯示屏原理及設計方案》
ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉ios使用者點擊一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}部分android系統中元素被點擊時產生的邊框怎麼去掉
android使用者點擊一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器內建的效果
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only; }
-webkit-user-modify有個副作用，就是IME不再能夠輸入多個字元
另外，有些機型去除不了，如小米2
對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
參考《如何去除android上a標籤產生的邊框》
winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉<meta name="msapplication-tap-highlight" content="no">webkit表單元素的預設面板怎麼重設
.css{-webkit-appearance:none;}webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}webkit表單輸入框placeholder的文字能換行麼
ios可以，android不行~
IE10（winphone8）表單元素預設面板如何重設禁用 select 預設下拉式箭頭
::-ms-expand 適用於表單選擇控制項下拉式箭頭的修改，有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand {display: none;}
禁用 radio 和 checkbox 預設樣式
::-ms-check 適用於表單複選框或選項按鈕預設表徵圖的修改，同樣有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
禁用PC端表單輸入框預設清除按鈕
當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，同樣設定使它隱藏(display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}禁止ios和android使用者選中文字
.css{-webkit-user-select:none}
參考《如何改變表單元素的外觀(for Webkit and IE10)》
打電話發簡訊的怎麼實現打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
發簡訊，winphone系統無效
<a href="sms:10086">發簡訊給: 10086</a>類比按鈕hover效果
移動端觸摸按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是行動裝置中並沒有滑鼠指標，使用css的hover並不能滿足我們的需求，還好國外有個啟用css的active效果，代碼如下，
<!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"><style type="text/css">a{-webkit-tap-highlight-color: rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}.btn-blue:active{background-color: #357AE8;}</style></head><body><div class="btn-blue">按鈕</div><script type="text/javascript">document.addEventListener("touchstart", function(){}, true)</script></body></html>
相容性ios5+、部分android 4+、winphone 8
要做到全相容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名
<!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"><style type="text/css">a{-webkit-tap-highlight-color: rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}.btn-blue-on{background-color: #357AE8;}</style></head><body><div class="btn-blue">按鈕</div><script type="text/javascript">var btnBlue = document.querySelector(".btn-blue");btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on"}btnBlue.ontouchend = function(){ this.className = "btn-blue"}</script></body></html> 旋轉螢幕的事件和樣式事件
window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；
window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; }} 樣式
//豎屏時使用的樣式@media all and (orientation:portrait) {.css{}}//橫屏時使用的樣式@media all and (orientation:landscape) {.css{}} audio元素和video元素在ios和andriod中無法自動播放
應對方案：觸屏即播
$(‘html‘).one(‘touchstart‘,function(){ audio.play()})
可參考《無法自動播放的audio元素》
搖一搖功能HTML5 deviceMotion：封裝了動作感應器資料的事件，可以擷取手機運動狀態下的運動加速度等資料。
手機拍照和上傳圖片<input type="file">的accept 屬性
<!-- 選擇照片 --><input type=file accept="image/*"><!-- 選擇視頻 --><input type=file accept="video/*">
使用總結：
原因
普通解決方案：
body{-webkit-text-size-adjust: 100%!important;}
最好的解決方案：
網路都是這麼寫的，但我並沒有測試出來
.css{/*設定內嵌的元素在 3D 空間如何呈現：保留 3D*/-webkit-transform-style: preserve-3d;/*（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏）*/-webkit-backface-visibility: hidden;} 開啟硬體加速
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
參考《用CSS開啟硬體加速來提高網站效能》
取消input在ios下，輸入的時候英文首字母的預設大寫<input autocapitalize="off" autocorrect="off" />android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}android 2.3 bug
參考《border-radius 移動之傷》
設計高效能CSS3動畫的幾個要素參考《High Performance Animations》
fixed bug解決方案
參考
《移動端web頁面使用position:fixed問題總結》
《使用iScroll.js解決ios4下不支援position:fixed的問題》
常用的移動端架構zepto.js文法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
官網：http://zeptojs.com/
中文(非官網)：http://www.css88.com/doc/zeptojs_api/
常使用的擴充模組：
瀏覽器檢測：https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js解決頁面不支援彈性滾動，不支援fixed引起的問題~
實現下拉重新整理，滑屏，縮放等功能~
最新版本已經更新到5.0
官網：http://cubiq.org/iscroll-5
underscore.js筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴充任何JavaScript內建對象。
最新版本已經更新到1.8.2
官網：http://underscorejs.org/
滑屏架構適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
flex布局flex布局目前可使用在移動中，並非所有的文法都全相容，但以下寫法筆者實踐過，效果良好~
/* ============================================================ flex：定義布局為盒模型 flex-v：盒模型垂直布局 flex-1：子項目佔據剩餘的空間 flex-align-center：子項目垂直置中 flex-pack-center：子項目水平置中 flex-pack-justify：子項目左右對齊 相容性：ios 4+、android 2.3+、winphone8+ ============================================================ */.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
樣本：左右對齊
<!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"><style type="text/css">/* ============================================================ flex：定義布局為盒模型 flex-v：盒模型垂直布局 flex-1：子項目佔據剩餘的空間 flex-align-center：子項目垂直置中 flex-pack-center：子項目水平置中 flex-pack-justify：子項目左右對齊 相容性：ios 4+、android 2.3+、winphone8+ ============================================================ */.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style></head><body><div class="flex flex-pack-justify"> <div>模組一</div> <div>模組二</div> <div>模組三</div> <div>模組四</div></div></body></html>
使用注意：flex下的子項目必須為區塊層級元素，非區塊層級元素在android2.3機器下flex失效
參考：
flexyboxes
“老”的Flexbox和“新”的Flexbox
跨瀏覽器的Flexbox
FastClick消除在行動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300延遲
參考《FastClick》
白樹移動端HTML5資源整理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
