網(wǎng)頁適配移動端問題總結，持續(xù)更新

兼容性

CSS偽類:active

如果你想使用元素的偽類來實現(xiàn) 按下激活 狀態(tài)，那么你需要知道以下問題：

iOS上的幾乎任何瀏覽器筋现，定義元素的偽類 :active 都是無效；
Android上箱歧，Android Browser 和 Chrome 都支持偽類 :active 矾飞，其它第三方瀏覽器有部分不支持；
定義了 :active 并且當前瀏覽器環(huán)境支持呀邢，當手指在滾動或者無意間的劃過時洒沦，:active 狀態(tài)都會被激活；

為了規(guī)避上述所有的問題价淌，如果需要 按下激活 狀態(tài)申眼，推薦使用 js 新增一個 className

清除輸入框內(nèi)陰影

iOS上的幾乎任何瀏覽器輸入框（input, textarea）默認有內(nèi)部陰影，但無法使用 box-shadow 來清除蝉衣，如果不需要陰影括尸，可以這樣關閉：

input,
textarea {
    /* 方法1: 去掉邊框 */
    border: 0;

    /* 方法2: 邊框色透明 */
    border-color: transparent;

    /* 方法3: 重置輸入框默認外觀 */
    -webkit-appearance: none;
    appearance: none;
}

Samsung S4圓角Bug

Samsung S4 手機在 Android Browser4.4.2 上（其他版本未測），如果你使用了 border-radius病毡，并且使用了 -webkit-transform 屬性濒翻，當使用了 translatez 或者 translate3d 值，圓角會出現(xiàn)問題：

<style>
.test {
    border: 2px solid red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    -webkit-transform: translate(0, 0) translatez(0);
    transform: translate(0, 0) translatez(0);
}
</style>
<div class="test"></div>

如上代碼啦膜，-webkit-transform: translate(0, 0) translatez(0) 將會導致圓角無法包裹住 background-color有送。

當然，-webkit-transform: translate3d(0, 0, 0) 也是一樣的僧家，所以如果你的某個場景是這樣的雀摘，那么可以直接使用 -webkit-transform: translate(0, 0) 來避免這個問題。

邊框圓角致背景溢出

在紅米和OPPO等手機某些版本的 Android Webview 中八拱，如果一個元素定義了 border + border-radius阵赠，這時如果該元素有背景，那么背景將會溢出圓角之外肌稻。

之所以會出現(xiàn)這個問題：其主要原因是因為CSS對背景裁剪（background-clip）有不同的處理方式清蚀，通常它可以是 border-box | padding-box | content-box 這3種方式。

瀏覽器的默認裁減方式是 border-box灯萍，即溢出 border 之外的背景都將被裁減轧铁。

對于上述無法裁減邊框之外背景的手機每聪，將值定義為 padding-box | content-box 都能fix這問題旦棉，不過更推薦使用 padding-box齿风。因為使用 content-box，如果定義了 padding 不為 0绑洛，背景將無法鋪滿元素救斑。

一個失敗的圓（圓角）

在移動平臺上開發(fā)時，用CSS畫一個圓很簡單真屯，只需要一句代碼：

.circle {
    border-radius: 50%;
}

不過脸候，在 Android Browser2.* 上，這個定義將會失效绑蔫，而顯示為默認的矩形运沦。

因為 Android Browser2.* 不支持以 百分比 作為 border-radius 的值，所以如果你需要兼容 Android Browser2.*配深，那么你可以這樣：

.circle {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
}

如果你覺得這樣定義不夠靈活携添，想懶一點，那么其實可以給 border-radius 預設一個比較大的值篓叶，比如 100rem烈掠，用以避免當元素的尺寸變了，圓角半徑也得跟著變缸托，除非元素的尺寸超出了你預設的閥值左敌。

不要使用偽元素動畫

有的時候你可能會為了減少頁面上的DOM數(shù)，而使用偽元素俐镐。但如果你想給偽元素增加 animation 或者 transition 動畫矫限，這時候會碰上支持性問題。

如果你的項目需要支持以下系統(tǒng)版本佩抹，那么建議直接使用真實元素：

iOS Safari6.1及以下
Android Browser4.1.*及以下奇唤，包括一些深度定制的系統(tǒng)，比如：
- 魅族 - Flyme OS 4.1.1.1C及以下（比這高的版本尚未測試過）- 咱國產(chǎn)能別這么坑么（安卓版本為4.4.4的魅族MX4 pro）

:checked與兄弟選擇符一起使用的bug

在 Android Browser4.2.*及以下（可能版本稍有出入）（包括坑爹的Flyme）匹摇，如果你有這樣一段代碼：

input:checked ~ .test {
  background-color: #f00;
}

那么將無任何效果咬扇，如果你想使得上述代碼生效，有2種方式：

第一種廊勃，使用 input 和 + 進行激活：

html + input {}
input:checked ~ .test {
  background-color: #f00;
}

只要存在 input和 + 選擇符配合使用的選擇器（空規(guī)則集也行）即可使得上述代碼激活生效懈贺。

第二種，直接換成 +：

input:checked + .test {
  background-color: #f00;
}

為什么flex布局不生效

使用塊級元素作為 flex items（flex子項）坡垫；

Android Browser4.3及以下梭灿，iOS Safari6.1及以下 的 flex子項 需要使用塊級元素，在這些版本之上還可以使用行內(nèi)塊元素

在這些版本中冰悠，如果你發(fā)現(xiàn)flex子項之間出現(xiàn)了間隙堡妒，或者在未定義換行的情況下子項自身抑或子項之間換行了，或者出現(xiàn)了其它不正常的情況溉卓，那么仔細看一下flex子項可能是使用了行內(nèi)級元素皮迟；

當橫向布局時搬泥，給 flex子項 子項定義 width 為非 auto 的值

Android Browser4.3及以下，iOS Safari6.1及以下 的 flex子項 如果沒有顯式的定義 width 為非 auto 的值伏尼，那么子項分配父元素剩余空間時將會不符合標準預期忿檩；

當縱向布局時，給 flex子項 子項定義 height 為非 auto 的值

Android Browser4.3及以下爆阶，iOS Safari6.1及以下 的 flex子項 如果沒有顯式的定義 height 為非 auto 的值燥透，那么子項分配父元素剩余空間時將會不符合標準預期；

為什么小于12px字號不生效

如果你是從pc開發(fā)轉到移動平臺的辨图，或者應該記得在pc端班套，Chrome及后來加入Webkit陣營的Opera都不支持頁面字號小于12px，當然你可以通過更改瀏覽器設置來改變這一情況故河，然后這并沒有什么卵用孽尽，不是么？

不幸的是，在移動端這個限制也依然存在，在Android Chrome上（包括部分版本上的Android Browser）沼本，仍然不支持小于12px的字號（測試至Android5.0.2, Chrome46）桩砰，除此之外，其他瀏覽器包括iOS上眾瀏覽器都能夠很好的支持超小字體。

所以，如果希望你的程序足夠安全，盡量不要定義小于12px的字號坎拐，或者換一種方式來實現(xiàn)。

題外話：假設你的項目使用了rem养匈，那么不要使用10作為換算因子哼勇，原因也如上

經(jīng)驗

禁止保存或拷貝圖像

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

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

需要注意的是，該方法只在 iOS 上有效猬仁。

取消touch高亮

在移動設備上帝璧，所有設置了偽類 :active 的元素，默認都會在激活狀態(tài)時湿刽，顯示高亮框的烁，如果不想要這個高亮，那么你可以通過以下方法來禁止：

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

禁止選中內(nèi)容

如果你不想用戶可以選中頁面中的內(nèi)容诈闺，那么你可以禁掉：

html {
    -webkit-user-select: none;
}

快速回彈滾動

早期的時候渴庆，移動端的瀏覽器都不支持非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; /* 該規(guī)則可能引起iOS UIWebView崩潰 */
}

設置添加到主屏幕的Web App標題

iOS Safari 允許用戶將一個網(wǎng)頁添加到主屏幕然后像 App 一樣來操作它晃危。我們知道每個 App 下方都會有一個名字叙赚，iOS Safari 提供了一個私有的 meta 來定義這個名字，代碼如下：

<meta name="apple-mobile-web-app-title" content="Web App名稱" />

Android Chrome31.0僚饭，Android Browser5.0 也開始支持添加到主屏幕了震叮，但并沒有提供相應的定義標題的方式，所以如果你想統(tǒng)一 iOS 和 Android 平臺定義 Web app 名稱的方式鳍鸵，可以使用 title 標簽來定義苇瓣，代碼如下：

<title>Web App名稱</title>

但如果你想要網(wǎng)頁標題和App名字不一樣的話，那就只有iOS才行偿乖。

設置添加到主屏幕的Web App圖標

當我們將一個網(wǎng)頁添加到主屏幕時击罪，除了會需要設置標題之外，肯定還需要能夠自定義這個App的圖標贪薪，代碼如下：

<link rel="apple-touch-icon" href="app.png" />

不過該方案媳禁，在擬物設計的 iOS6及以前 會自動為圖標添加一層高光效果，iOS7 已使用了扁平化設計画切，所以如果使用該方案竣稽，在不同版本下得到的效果會不一致。

當然霍弹，你也可以使用原圖作為App的圖標毫别，用以保持各平臺表現(xiàn)一致，代碼如下：

<link rel="apple-touch-icon-precomposed" href="app.png" />

如果你想給不同的設備定不同的圖標典格，可以通過 sizes 屬性來定義岛宦，形如：

<link rel="apple-touch-icon" sizes="76x76" href="ipad.png@1x" />
<link rel="apple-touch-icon" sizes="120x120" href="iphone-retina@2x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="ipad-retina@2x.png" />
<link rel="apple-touch-icon" sizes="180x180" href="iphone-retina@3x.png" />

規(guī)則如下：

如果沒有跟相應設備推薦尺寸一致的圖標，會優(yōu)先選擇比推薦尺寸大并且最接近推薦尺寸的圖標耍缴。
如果沒有比推薦尺寸大的圖標恋博，會優(yōu)先選擇最接近推薦尺寸的圖標。
如果有多個圖標符合推薦尺寸私恬，會優(yōu)先選擇包含關鍵字precomposed的圖標债沮。

實際情況下，大部分智能手機都接近或者已經(jīng)達到視網(wǎng)膜屏質量本鸣，所以如果想省事的話疫衩，可以分別為 iPhone 和 iPad 定義一種高質量的 icon 即可。

該方案在 iOS 和 Android5.0+ 上都通用荣德。

添加到主屏幕時隱藏地址欄和狀態(tài)欄（即全屏）

當我們將一個網(wǎng)頁添加到主屏幕時闷煤，會更希望它能有像 App 一樣的表現(xiàn)童芹，沒有地址欄和狀態(tài)欄全屏顯示，代碼如下：

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

該方案在 iOS 和 Android5.0+ 上都通用鲤拿。

添加到主屏幕時設置系統(tǒng)頂欄顏色

當我們將一個網(wǎng)頁添加到主屏幕時假褪，還可以對 系統(tǒng)顯示手機信號、時間近顷、電池的頂部狀態(tài)欄 顏色進行設置生音，前提是開啟了：

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

有了這個前提，你可以通過下面的方式來進行定義：

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

content只有3個固定值可選：default | black | black-translucent

如果設置為 default窒升，狀態(tài)欄將為正常的缀遍，即白色，網(wǎng)頁從狀態(tài)欄以下開始顯示饱须；
如果設置為 black域醇，狀態(tài)欄將為黑色，網(wǎng)頁從狀態(tài)欄以下開始顯示蓉媳；
如果設置為 black-translucent譬挚，狀態(tài)欄將為灰色半透明，網(wǎng)頁將充滿整個屏幕酪呻，狀態(tài)欄會蓋在網(wǎng)頁之上殴瘦；

該設置只在 iOS 上有效。

電話號碼識別

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接号杠，比如：

7位數(shù)字蚪腋，形如：1234567
帶括號及加號的數(shù)字，形如：(+86)123456789
雙連接線的數(shù)字姨蟋，形如：00-00-00111
11位數(shù)字屉凯，形如：13800138000

可能還有其他類型的數(shù)字也會被識別，但在具體的業(yè)務場景中眼溶，有些時候這是不必須的悠砚，所以你可以關閉電話自動識別，然后在需要撥號的地方堂飞，開啟電話呼出和短信功能灌旧。

關閉電話號碼識別：

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

開啟撥打電話功能：

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

開啟發(fā)送短信功能：

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

郵箱地址識別

在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串绰筛，不論有你沒有加上郵箱鏈接枢泰，當你在這個字符串上長按，會彈出發(fā)郵件的提示铝噩。

關閉郵箱地址識別：

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

開啟郵件發(fā)送：

<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

如果想同時關閉電話和郵箱識別衡蚂，可以把它們寫到一條 meta 內(nèi)，代碼如下：

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

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

在iOS中，默認情況下鍵盤是開啟首字母大寫的功能的毛甲，如果業(yè)務不想出現(xiàn)首字母大寫年叮，可以這樣：

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

關閉iOS輸入自動修正

在iOS中，默認輸入法會開啟自動修正輸入內(nèi)容的功能玻募，如果不需要的話只损，可以這樣：

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

禁止文本縮放

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

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

需要注意的是坑雅，PC端的該屬性已經(jīng)被移除辈挂，該屬性在移動端要生效衬横，必須設置 `meta viewport'

待續(xù)啊待續(xù)裹粤。。蜂林。

強制豎屏

<!-- 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">

不對網(wǎng)站進行緩存

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

優(yōu)先使用IE和chrome

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

待續(xù)啊待續(xù)...

var ua = navigator.userAgent.toLowerCase();

<a name="userAgent"></a>
1.判斷是否是微信

function isWeixinBrowser() {
return (/micromessenger/.test(ua)) ? true : false;
}

2.判斷是否是android

var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('linux') > -1;

3.具體過程

scheme是客戶端定義的url-scheme

$("a[href^='scheme://']").on('click',function(e){
e.preventDefault();//阻止默認行為
if(isWeixinBrowser()){
$('.layer').show();//遮罩層（使用外部瀏覽器打開遥诉，此處樣式自行設定）
}else{
if(isAndroid){
//android
$('body').append("<iframe src="" style='display:none' target='' ></iframe>");//target為空防止在當前頁面刷新
setTimeout(function(){window.location = 'http://www.510wifi.com/weixin_download_client.html'},600);
}else{
//ios
window.location = 'scheme://openapp';
setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/id123456789'},25);
}
}
})

附：判斷手機端各種瀏覽器

if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客戶端打開
}
if (ua.match(/QQ/i) == "qq") {
//在QQ空間打開
}
if (browser.versions.ios) {
//是否在IOS瀏覽器打開
}
if(browser.versions.android){
//是否在安卓瀏覽器打開
}

var u = navigator.userAgent, app = navigator.appVersion;
trident: u.indexOf('Trident') > -1, //IE內(nèi)核
presto: u.indexOf('Presto') > -1, //opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.Mobile./), //是否為移動終端
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器
iPhone: u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web應該程序噪叙，沒有頭部與底部