第一次弄移動端H5專案開發，雖然是簡單的頁面展示，但也遇到了很多細節問題與相容問題，尤其是h5視訊標籤video,

一.移動端禁止縮放 相容

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

主要屬性是user-scalable=no"，

• width：視口的寬度，width=device-width：寬度是裝置的寬度
• initial-scale：初始化縮放，- initial-scale=1.0：不縮放
• user-scalable：是否允許使用者自行縮放，取值0或1，yes或no
• minimum-scale：最小縮放
• maximum-scale：最大縮放
• 一般設定了不允許縮放，就沒必要設定最大最小縮放了。

在開發移動端時，meta 還有很多屬性可以設定，比如

1.設定當前html檔案的字元編碼

<meta charset="UTF-8">

2.設定瀏覽器的相容模式（讓IE使用最新的瀏覽器渲染）

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

3.是用於設定禁止瀏覽器從本地機的快取中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出

<meta http-equiv="Pragma" content="no-cache"/>

4.禁止將頁面中的一連串數字識別為電話號碼、並設定為手機可以撥打的一個連線。

這個標籤的預設值是telephone=yes。

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

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

當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。

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

6.控制狀態列顯示樣式

content設定狀態列顏色,iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

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

7.條件註釋

!--[if lt IE 9]>  <script src="lib/html5shiv/html5shiv.min.js"></script>  <script src="lib/respond/respond.min.js"></script>  <![endif]-->  - html5shiv讓瀏覽器可以識別html5的新標籤；  - respond讓低版本瀏覽器可以使用CSS3的媒體查詢。

8.iphone裝置中的safari私有meta標籤，它表示：允許全屏模式瀏覽；

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

還有其他的這裡就不一一介紹了

<!-- 檢視視窗，移動端特屬的標籤。 -->     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />     <!-- 是否啟動webapp功能，會刪除預設的蘋果工具欄和選單欄。 -->     <meta name="apple-mobile-web-app-capable" content="yes" />     <!-- 這個主要是根據實際的頁面設計的主體色為搭配來進行設定。 -->     <meta name="apple-mobile-web-app-status-bar-style" content="black" />     <!-- 忽略頁面中的數字識別為電話號碼,email識別 -->     <meta name="format-detection" content="telephone=no, email=no" />     <!-- 啟用360瀏覽器的極速模式(webkit) -->     <meta name="renderer" content="webkit">     <!-- 避免IE使用相容模式 -->     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->     <meta name="HandheldFriendly" content="true">     <!-- 微軟的老式瀏覽器 -->     <meta name="MobileOptimized" content="320">     <!-- uc強制豎屏 -->     <meta name="screen-orientation" content="portrait">     <!-- QQ強制豎屏 -->     <meta name="x5-orientation" content="portrait">     <!-- UC強制全屏 -->     <meta name="full-screen" content="yes">     <!-- QQ強制全屏 -->     <meta name="x5-fullscreen" content="true">     <!-- UC應用模式 -->     <meta name="browsermode" content="application">     <!-- QQ應用模式 -->     <meta name="x5-page-mode" content="app">     <!-- windows phone 點選無高光 -->     <meta name="msapplication-tap-highlight" content="no">

二.移動端Retina螢幕1px邊框問題

造成邊框變粗的原因：因為css中的1px並不等於移動裝置的1px，這些由於不同的手機有不同的畫素密度。在window物件中有一個devicePixelRatio屬性，他可以反應css中的畫素與裝置的畫素比。devicePixelRatio的官方的定義為：裝置物理畫素和裝置獨立畫素的比例，也就是 devicePixelRatio = 物理畫素 / 獨立畫素

1.設定0.5px邊框：解決方案是通過 JavaScript 檢測瀏覽器能否處理0.5px的邊框，如果可以，給html標籤元素添加個class。

if (window.devicePixelRatio && devicePixelRatio >= 2)

{

var testElem = document.createElement('div');

testElem.style.border = '.5px solid transparent';

document.body.appendChild(testElem); }

if(testElem.offsetHeight==1) {

document.querySelector('html').classList.add('hairlines');

}

document.body.removeChild(testElem);

} // 指令碼應該放在內，如果在裡面執行，需要包裝 $(document).ready(function() {})

然後使用：

div{border:1px solid #000}; . hairlines div{border-width:0.5px}

優點：程式碼簡單   缺點：無法相容安卓裝置、 iOS 8 以下裝置。

2.使用background-image實現

background-image:你要先準備一張符合你要求的圖片。然後將邊框模擬在背景上。

.background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }

優點：可以設定單條,多條邊框 ；沒有效能瓶頸的問題     缺點：修改顏色麻煩, 需要替換圖片；圓角需要特殊處理，並且邊緣會模糊

3.使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0.5px的效果;

.box-shadow-1px{box-shadow:inset 0 -1px 1px -1px #000; 

優點：程式碼少，可滿足所有場景         缺點：邊框有陰影，顏色變淺；

4.viewport + rem 實現

同時通過設定對應viewport的rem基準值，這種方式就可以像以前一樣輕鬆愉快的寫1px了。

在devicePixelRatio = 2 時，輸出viewport：

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

在devicePixelRatio = 3 時，輸出viewport：<meta name="viewport" content="width=device-width,initial-scale=0.33333333333333333,maximum-scale=0.33333333333333333,minimum-scale=0.33333333333333333,user-scalable=no">

這種相容方案相對比較完美，適合新的專案，老的專案修改成本過大。 對於這種方案，可以看看《使用Flexible實現手淘H5頁面的終端適配》

優點：所有場景都能滿足；一套程式碼，可以相容基本所有佈局；這個也是我們開發移動端時需要使用的rem佈局，這個對移動端開發很重要，

缺點：老專案修改代價過大，只適用於新專案；

5.偽類 + transform 實現  針對老專案

原理是把原先元素的 border 去掉，然後利用 :before 或者 :after 重做 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。 單條border樣式設定：

.scale{ position: relative; border:none; } .scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

三.判斷裝置型別是android還是ios

  let u = navigator.userAgent;

            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端

            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

            if(isAndroid) {

               console.log('Android')

            } else if(isiOS) {

                console.log('IOS')

            } else {

                console.log('PC“)

            }，

/

/判斷訪問終端

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

return {

trident: u.indexOf('Trident') > -1, //IE核心

presto: u.indexOf('Presto') > -1, //opera核心

webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌核心

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐核心

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端

android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端

iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp: u.indexOf('Safari') == -1, //是否web應該程式，沒有頭部與底部

weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）

qq: u.match(/\sQQ/i) == " qq" //是否QQ

};

}(),

language:(navigator.browserLanguage || navigator.language).toLowerCase()

}；

使用方法：

//判斷是否IE核心

if(browser.versions.trident){ alert("is IE"); }

//判斷是否webKit核心

if(browser.versions.webKit){ alert("is webKit"); }

//判斷是否移動端

if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移動端"); }

檢查瀏覽器語言：

currentLang = navigator.language; //判斷除IE外其他瀏覽器使用語言if(!currentLang){//判斷IE瀏覽器使用語言currentLang = navigator.browserLanguage;}

四.ios滑動卡頓問題

-webkit-overflow-scrolling: touch;

五.ios移動端頭部底部fixed定位，輸入框收回閃屏問題

只需要在中間部分外層div新增css樣式

position:fixed；top:50px;bottom:50px;overflow:scroll

六.html在移動端IOS點選閃屏問題

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

七.打電話，發簡訊，寫郵件

1.打電話:<a href:"tel:10086">撥打10086</a>

2.發簡訊:<a href="sms:10086">發簡訊給10086</a>  //winphone系統無效

3.發郵件：

//注：在新增這些功能時，第一個功能以"?"開頭，後面的以"&"開頭

//1.普通郵件 <a href="mailto:[email protected]">點選我發郵件</a>

//2.收件地址後新增?cc=開頭，可新增抄送地址（Android存在相容問題） <a href="mailto:[email protected][email protected]">點選我發郵件</a>

//3.跟著抄送地址後，寫上&bcc=,可新增密件抄送地址（Android存在相容問題） <a href="mailto:[email protected][email protected]&[email protected]">點選我發郵件</a>

//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址 <a href="mailto:[email protected];[email protected]">點選我發郵件</a>

//5.包含主題，用?subject= <a href="mailto:[email protected]?subject=郵件主題">點選我發郵件</a> //6.包含內容，用?body=;如內容包含文字，使用%0A給文字換行 <a href="mailto:[email protected]?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點選我發郵件</a>

//7.內容包含連結，含http(s)://等的文字自動轉化為連結 <a href="mailto:[email protected]?body=http://www.baidu.com">點選我發郵件</a>

//8.內容包含圖片（PC不支援） <a href="mailto:[email protected]?body=">點選我發郵件</a>

">點選我發郵件</a>

八.修改移動端難看的點選的高亮效果，iOS和安卓下都有效

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

九.阻止旋轉螢幕時自動調整字型大小

* {
  -webkit-text-size-adjust: none;
}

十.iOS下取消input在輸入的時候英文首字母的預設大寫

<input type="text" autocapitalize="none">

十一.移動端click螢幕產生200-300ms的延時響應

1.FastClick解決延遲點選的原始碼解析:

使用第三方js檔案 

首先，我們來看FastClick的使用。

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

2.zepto的touch模組，tap事件也是為了解決在click的延遲問題

十二.input的placeholder會出現文字位置偏上的情況

input 的placeholder會出現文字位置偏上的情況：PC端設定line-height等於height能夠對齊，而移動端仍然是偏上，解決方案時是設定css

line-height：normal;