移動Web開發技巧彙總

原文：http://www.html-js.com/article/Front-end-sharing%202983

META相關

1. 添加到主屏後的标題（IOS）

<meta name="apple-mobile-web-app-title" content="标題">

2. 啟用 WebApp 全屏模式（IOS）

當網站添加到主螢幕後再點選進行啟動時，可隐藏位址欄（從浏覽器跳轉或輸傳入連結接進入并沒有此效果）

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

隐藏位址欄（從浏覽器跳轉或輸傳入連結接進入有效）

3. 百度禁止轉碼

通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta标簽來禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp轉碼聲明

4. 設定狀态欄的背景顔色（IOS）

設定狀态欄的背景顔色，隻有在

"apple-mobile-web-app-capable" content="yes"

時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 參數：

default ：狀态欄背景是白色。
black ：狀态欄背景是黑色。
black-translucent ：狀态欄背景是半透明。如果設定為 default 或 black ,網頁内容從狀态欄底部開始。如果設定為 black-translucent ,網頁内容充滿整個螢幕，頂部會被狀态欄遮擋。

5. 移動端手機号碼識别（IOS）

在 iOS Safari （其他浏覽器和Android均不會）上會對那些看起來像是電話号碼的數字處理為電話連結，比如：

7位數字，形如：1234567
帶括号及加号的數字，形如：(+86)123456789
雙連接配接線的數字，形如：00-00-00111
11位數字，形如：13800138000

可能還有其他類型的數字也會被識别。我們可以通過如下的meta來關閉電話号碼的自動識别：

<meta name="format-detection" content="telephone=no" />

開啟電話功能

<a href="tel:123456">123456</a>

開啟短信功能：

<a href="sms:123456">123456</a>

6. 移動端郵箱識别（Android）

與電話号碼的識别一樣，在安卓上會對符合郵箱格式的字元串進行識别，我們可以通過如下的meta來管别郵箱的自動識别：

<meta content="email=no" name="format-detection" />

同樣地，我們也可以通過标簽屬性來開啟長按郵箱位址彈出郵件發送的功能：

<a mailto:[email protected].com">[email protected].com</a>

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app啟動動畫

由于iPad 的啟動畫面是不包括狀态欄區域的。是以啟動圖檔需要減去狀态欄區域所對應的方向上的20px大小，相應地在retina裝置上要減去40px的大小

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖示

指定web app添加到主屏後的圖示路徑，有兩種略微不同的方式：

<!-- 設計原圖 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">

* apple-touch-icon：在IOS6及以下的版本會自動為圖示添加一層高光效果（IOS7開始已使用扁平化的設計風格） * apple-touch-icon-precomposed：使用“設計原圖圖示”

效果：

移動Web開發技巧彙總

圖示尺寸：

可通過指定size屬性來為不同的裝置提供不同的圖示（但通常來說，我們隻需提供一個114 x 114 pixels大小的圖示即可）

官方說明如下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

57 x 57 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

10. 優先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

11.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>

常見問題

1、移動端如何定義字型font-family

三大手機系統的字型：

ios 系統

預設中文字型是Heiti SC
預設英文字型是Helvetica
預設數字字型是HelveticaNeue
無微軟雅黑字型

android 系統

預設中文字型是Droidsansfallback
預設英文和數字字型是Droid Sans
無微軟雅黑字型

winphone 系統

預設中文字型是Dengxian(方正等線體)
預設英文和數字字型是Segoe
無微軟雅黑字型

各個手機系統有自己的預設字型，且都不支援微軟雅黑如無特殊需求，手機端無需定義中文字型，使用系統預設英文字型和數字字型可使用 Helvetica ，三種系統都支援

* 移動端定義字型的代碼 */
body{font-family:Helvetica;}

2、移動端字型機關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
    }
}

3、移動端touch事件(區分webkit 和 winphone)

當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件

以下支援webkit

touchstart——當手指觸碰螢幕時候發生。不管目前有多少隻手指
touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
touchend——當手指離開螢幕時觸發
touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

以下支援winphone 8

MSPointerDown——當手指觸碰螢幕時候發生。不管目前有多少隻手指
MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
MSPointerUp——當手指離開螢幕時觸發

4、移動端click螢幕産生200-300 ms的延遲響應

移動裝置上的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後才生效，也就間接導緻影響其他業務邏輯的處理。

解決方案：

fastclick可以解決在手機上點選事件的300ms延遲
zepto的touch子產品，tap事件也是為了解決在click的延遲問題

觸摸事件的響應順序

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應

5、什麼是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}

6、ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉

ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

7、部分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有個副作用，就是輸入法不再能夠輸入多個字元

另外，有些機型去除不了，如小米2

對于按鈕類還有個辦法，不使用a或者input标簽，直接用div标簽

8、winphone系統a、input标簽被點選時産生的半透明灰色背景怎麼去掉

<meta name="msapplication-tap-highlight" content="no">

9、webkit表單元素的預設外觀怎麼重置

.css{-webkit-appearance:none;}

10、webkit表單輸入框placeholder的顔色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

11、webkit表單輸入框placeholder的文字能換行麼

ios可以，android不行~

12. 關閉iOS鍵盤首字母自動大寫

在iOS中，預設情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：

<input type="text" autocapitalize="off" />

13. 關閉iOS輸入自動修正

和英文輸入預設自動首字母大寫那樣，IOS還做了一個功能，預設輸入法會開啟自動修正輸入内容，這樣的話，使用者經常要操作兩次。如果不希望開啟此功能，我們可以通過input标簽屬性來關閉掉：

<input type="text" autocorrect="off" />

14. 禁止文本縮放

當移動裝置橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

html {
　　      -webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設定 ‘meta viewport’。

15. 移動端如何清除輸入框内陰影

在iOS上，輸入框預設有内部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

16. 快速回彈滾動

我們先來看看回彈滾動在手機浏覽器發展的曆史：

早期的時候，移動端的浏覽器都不支援非body元素的滾動條，是以一般都借助 iScroll;
Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上隻能通過2個手指進行滾動；
Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果，不過随後這個特性又被移除；
iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：

.xxx {
        overflow: auto; /* auto | scroll */
        -webkit-overflow-scrolling: touch;
    }

PS：iScroll用過之後感覺不是很好，有一些詭異的bug，這裡推薦另外一個 iDangero Swiper，這個插件內建了滑屏滾動的強大功能（支援3D），而且還有回彈滾動的内置滾動條，官方位址：

iDangero

17. 移動端禁止選中内容

如果你不想使用者可以選中頁面中的内容，那麼你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

18. 移動端取消touch高亮效果

在做移動端頁面時，會發現所有a标簽在觸發點選時或者所有設定了僞類 :active 的元素，預設都會在激活狀态時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來進行全局的禁止：

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連結的a标簽換成其它标簽，可以解決這個問題。

19. 如何禁止儲存或拷貝圖像（IOS）

通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

img { -webkit-touch-callout: none; }

20.模拟按鈕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>

21.螢幕旋轉的事件和樣式

事件

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{}
}

22.audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

23.搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。

24.手機拍照和上傳圖檔

<input type="file">

的accept 屬性

<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視訊 -->
<input type=file accept="video/*">

使用總結：

ios 有拍照、錄像、選取本地圖檔功能
部分android隻有選取本地圖檔功能
winphone不支援
input控件預設外觀醜陋

25. 消除transition閃屏

.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);
}

設計高性能CSS3動畫的幾個要素

盡可能地使用合成屬性transform和opacity來設計CSS3動畫，
不使用position的left和top來定位
利用translate3D開啟GPU加速

26. android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

架構

1. 移動端基礎架構

zepto.js 文法與jquery幾乎一樣，會jquery基本會zepto~
iscroll.js 解決頁面不支援彈性滾動，不支援fixed引起的問題~ 實作下拉重新整理，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數式程式設計的實用功能，但是沒有擴充任何JavaScript内置對象。
fastclick 加快移動端點選響應時間
animate.css CSS3動畫效果庫

2. 滑屏架構

适合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js
iSlider.js
fullpage.js

3.瀑布流架構

masonry

工具推薦

caniuse 各浏覽器支援html5屬性查詢
paletton 調色搭配

移動Web開發技巧彙總

1. 添加到主屏後的标題（IOS）

2. 啟用 WebApp 全屏模式（IOS）

3. 百度禁止轉碼

4. 設定狀态欄的背景顔色（IOS）

5. 移動端手機号碼識别（IOS）

6. 移動端郵箱識别（Android）

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

8. IOS Web app啟動動畫

9. 添加到主屏後的APP圖示

10. 優先使用最新版本 IE 和 Chrome

11.viewport模闆

常見問題

1、移動端如何定義字型font-family

2、移動端字型機關font-size選擇px還是rem

3、移動端touch事件(區分webkit 和 winphone)

4、移動端click螢幕産生200-300 ms的延遲響應

5、什麼是Retina 顯示屏，帶來了什麼問題

6、ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉

7、部分android系統中元素被點選時産生的邊框怎麼去掉

8、winphone系統a、input标簽被點選時産生的半透明灰色背景怎麼去掉

9、webkit表單元素的預設外觀怎麼重置

10、webkit表單輸入框placeholder的顔色值能改變麼

11、webkit表單輸入框placeholder的文字能換行麼

12. 關閉iOS鍵盤首字母自動大寫

13. 關閉iOS輸入自動修正

14. 禁止文本縮放

15. 移動端如何清除輸入框内陰影

16. 快速回彈滾動

17. 移動端禁止選中内容

18. 移動端取消touch高亮效果

19. 如何禁止儲存或拷貝圖像（IOS）

20.模拟按鈕hover效果

21.螢幕旋轉的事件和樣式

22.audio元素和video元素在ios和andriod中無法自動播放

23.搖一搖功能

24.手機拍照和上傳圖檔

25. 消除transition閃屏

26. android 上去掉語音輸入按鈕

架構

1. 移動端基礎架構

2. 滑屏架構

3.瀑布流架構

工具推薦

繼續閱讀