移動端性能優(yōu)化及兼容性

禁止保存或者拷貝圖像

僅iOS有效

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

取消touch高亮

所有設置了:active的元素, 默認在激活狀態(tài)時, 顯示高亮框

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

禁止選中內(nèi)容

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

click 300ms 延時響應 使用 Fastclick 

window.addEventListener( "load", function() {
  FastClick.attach( document.body );
}, false );

快速回彈滾動

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

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

.element {
  overflow: auto; /* auto | scroll */
  -webkit-overflow-scrolling: touch; /* 該規(guī)則可能引起iOS UIWebView崩潰 */
}

還可以借助iScroll或者更強大的Swiper(支持3D內(nèi)置滾動條)實現(xiàn)

設備檢測

// 這段代碼引用自：https://github.com/binnng/device.js

var WIN = window;
var LOC = WIN["location"];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase();

function test(needle) {
  return needle.test(UA);
}

var IsTouch = "ontouchend" in WIN;
var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
var IsIPad = !IsAndroid && test(/ipad/);
var IsIPhone = !IsAndroid && test(/ipod|iphone/);
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test(/windows phone/);
var IsWebapp = !!NA["standalone"];
var IsXiaoMi = IsAndroid && test(/mi\s+/);
var IsUC = test(/ucbrowser/);
var IsWeixin = test(/micromessenger/);
var IsBaiduBrowser = test(/baidubrowser/);
var IsChrome = !!WIN["chrome"];
var IsBaiduBox = test(/baiduboxapp/);
var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
var IsHTC = IsAndroid && test(/htc\s+/);
var IsBaiduWallet = test(/baiduwallet/);

獲取滾動條的值

window.scrollY;
window.scrollX;

<head>

頁面窗口自動調(diào)整到設備寬度, 并禁止用戶縮放頁面

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

指定 iOS 的 safari 頂端狀態(tài)條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->

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

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

添加到主屏幕時設置系統(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, 該設置只在 iOS 上有效。
    • 如果設置為 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 Safari 提供了一個私有的 meta 來定義主屏幕App名字

<!-- iOS自動增加圖標效果 -->
<meta name="apple-mobile-web-app-title" content="Web App名稱" />
<!-- 使用原圖作為App的圖標，用以保持各平臺表現(xiàn)一致 -->
<link rel="apple-touch-icon-precomposed" href="app.png" />
<!-- 想給不同的設備定不同的圖標，可以通過 sizes 屬性來定義 -->
<!-- 如果沒有跟相應設備推薦尺寸一致的圖標，會優(yōu)先選擇比推薦尺寸大并且最接近推薦尺寸的圖標。
如果沒有比推薦尺寸大的圖標，會優(yōu)先選擇最接近推薦尺寸的圖標。
如果有多個圖標符合推薦尺寸，會優(yōu)先選擇包含關鍵字precomposed的圖標。 -->
<!-- 想省事的話，可以分別為 iPhone 和 iPad 定義一種高質量的 icon 即可 -->
<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" />

自定義App圖標

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

電話號碼識別

<!-- 關閉電話號碼識別： -->
<meta name="format-detection" content="telephone=no" />
<!-- 開啟電話功能： -->
<a href="tel:123456">123456</a>
<!-- 開啟短信功能： -->
<a href="sms:123456">123456</a>

郵箱地址的識別

<!-- 關閉郵箱地址識別： -->
<meta name="format-detection" content="email=no" />
<!-- 開啟郵件發(fā)送： -->
<a href="mailto:mobile@gmail.com">mobile@gmail.com</a>

同時關閉電話和郵箱識別

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

關閉iOS輸入自動修正

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

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

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

禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止(PC端的該屬性已經(jīng)被移除，該屬性在移動端要生效，必須設置 meta viewport)：

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

CSS 兼容性

CSS偽類 :active

如果需要 按下激活 狀態(tài)，推薦使用 js 新增一個 className

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

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

iOS默認輸入框有內(nèi)陰影,無法使用box-shadow來清除,可以采用以下代碼清除

input,
textarea {
  border: 0; // 方法1 去掉邊框
  border-color: transparent; // 方法2 邊框色透明
  -webkit-appearance: none; // 方法3 重置輸入框默認外觀
  appearance: none;
}

Samsung S4圓角Bug

Samsung S4手機在 Android Browser4.4.2 上（其他版本未測），如果你使用了 border-radius，并且使用了 -webkit-transform 屬性，當使用了 translatez 或者 translate3d 值，圓角會出現(xiàn)問題，可以直接使用 -webkit-transform: translate(0, 0) 來避免這個問題。

邊框圓角導致背景溢出

紅米 OPPO某些版本的Android Webview, 如果一個元素定義了border + border-radius, 這時背景將會溢出圓角之外。其主要原因是因為CSS對背景裁剪（background-clip）有不同的處理方式，通常它可以是 border-box | padding-box | content-box 這3種方式。
瀏覽器的默認裁減方式是 border-box，即溢出 border 之外的背景都將被裁減。將值定義為 padding-box | content-box 都能fix這問題，不過 更推薦使用 padding-box。因為使用 content-box，如果定義了 padding 不為 0，背景將無法鋪滿元素。

圓角繪制失敗

// 繪制圓角
.circle {
    border-radius: 50%;
}
// 在 Android Browser2.* 上，這個定義將會失效，而顯示為默認的矩形。
// 因為 Android Browser2.* 不支持以 百分比 作為 border-radius 的值

// 兼容 Android Browser2.*
// 方法1
.circle {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
}
// 方法2
.circle {
    border-radius: 100rem;
}

不要使用偽元素動畫

如果你想給偽元素增加 animation 或者 transition 動畫，在以下系統(tǒng)會出現(xiàn)問題

  • iOS Safari6.1及以下
  • Android Browser4.1.*及以下，包括一些深度定制的系統(tǒng)，比如：
    • 魅族 Flyme OS 4.1.1.1C及以下

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

在 Android Browser4.2.*及以下（可能版本稍有出入）（包括坑爹的Flyme），以下代碼無任何效果：

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

如果你想使得上述代碼生效，有2種方式：

// 第一種，使用 input 和 + 進行激活：
// 只要存在 input和 + 選擇符配合使用的選擇器（空規(guī)則集也行）即可使得上述代碼激活生效。
html + input {}
input:checked ~ .test {
  background-color: #f00;
}
// 第二種，直接換成 +：
input:checked + .test {
  background-color: #f00;
}

小于12px字號不生效

在Android Chrome上（包括部分版本上的Android Browser），仍然不支持小于12px的字號（測試至Android5.0.2, Chrome46）
項目使用rem, 不要使用10作為換算因子, 原因也如上

Flex 布局不生效

Android Browser4.3及以下，iOS Safari6.1及以下

  • 使用塊級元素作為 flex items（flex子項）；
  • 當橫向布局時，給 flex子項 子項定義 width 為非 auto 的值
  • 當縱向布局時，給 flex子項 子項定義 height 為非 auto 的值

參考

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,790評論 25贊 709
  • 移動開發(fā)基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,713評論 0贊 6
  • H5移動端知識點總結 閱讀目錄 移動開發(fā)基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,817評論 0贊 26
  • 經(jīng)過這兩天的PPT學習，自己也需要去總結出一些方法，所以我自己也是寫了點自己的教程。 【欣賞+打卡】 欣賞就是為了...
    廣邕君PPT設計師閱讀 427評論 0贊 1
  • 夢，又是夢 是啊，除了在夢里 我又怎么可能通過別的方式見到你
    jrcxcx閱讀 155評論 0贊 1

友情鏈接更多精彩內(nèi)容