移動前端開發經驗小結

1、概要

本文檔針對移動前端開發，包括 Hybrid 裏面的web頁面，非 Native 應用。

2、適用

全部經驗適用於：iOS6.0+, Android4.0+

3、小結

---

<1>css僞類:active

若是你想使用元素的僞類來實現 按下激活 狀態，那麼你須要知道如下問題：

1. iOS上的幾乎任何瀏覽器，定義元素的僞類 :active 都是無效；
2. Android上，Android Browser 和 Chrome 都支持僞類 :active ，其它第三方瀏覽器有部分不支持；
3. 定義了 :active 而且當前瀏覽器環境支持，當手指在滾動或者無心間的劃過期，:active 狀態都會被激活；
4. 爲了規避上述全部的問題，若是須要 按下激活 狀態，推薦使用 js 新增一個 className

<2>清除輸入框內陰影

iOS上的幾乎任何瀏覽器輸入框（input, textarea）默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

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

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

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

<3>圓角Bug

手機在 Android Browser4.4.2 上（其餘版本未測），若是你使用了 border-radius，而且使用了 -webkit-transform 屬性，當使用了 translatez 或者 translate3d 值，圓角會出現問題：

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

<div class="test"></div>

如上代碼，-webkit-transform: translate(0, 0) translatez(0) 將會致使圓角沒法包裹住 background-color。

固然，-webkit-transform: translate3d(0, 0, 0) 也是同樣的，因此若是你的某個場景是這樣的，那麼能夠直接使用 -webkit-transform: translate(0, 0) 來避免這個問題

<4>邊框圓角致背景溢出

在紅米和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，背景將沒法鋪滿元素。

<5>一個失敗的圓（圓角）

在移動平臺上開發時，用CSS畫一個圓很簡單，只須要一句代碼：

.circle {
    border-radius: 50%;
}

不過，在 Android Browser2.* 上，這個定義將會失效，而顯示爲默認的矩形。

由於 Android Browser2. 不支持以 百分比 做爲 border-radius 的值，因此若是你須要兼容 Android Browser2.，那麼你能夠這樣：

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

若是你以爲這樣定義不夠靈活，想懶一點，那麼其實能夠給 border-radius 預設一個比較大的值，好比 100rem，用以免當元素的尺寸變了，圓角半徑也得跟着變，除非元素的尺寸超出了你預設的閥值。

<6>禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：

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

<7>郵箱地址識別
在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱連接，當你在這個字符串上長按，會彈出發郵件的提示。

關閉郵箱地址識別：

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

開啓郵件發送：

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

<8>如何禁止保存或拷貝圖像
一般當你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：
img {

-webkit-touch-callout: none;

}
PS：須要注意的是，該方法只在 iOS 上有效
<9>移動端取消touch高亮效果
在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來禁止：

`.xxx {

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

}`
這個設置，在大部分機子上都是起效果的。可是，移動端三星自帶瀏覽器，點擊頁面任意a標籤時，設置-webkit-tap-highlight-color:rgba(0,0,0,0)仍是會有陰影底色，這應該是瀏覽器強制加上去的，經過代碼設置也沒法覆蓋。

有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。
<10>移動端禁止選中內容
若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

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

就這麼簡單，可是目前只支持webkit內核的瀏覽器。今天先找這些明天繼續；