一、概要

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

二、適用

所有經驗適用于：iOS6.0+, Android4.0+

三、小結

---

<1>css偽類:active

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

iOS上的幾乎任何瀏覽器，定義元素的偽類 :active 都是無效；

Android上，Android Browser 和 Chrome 都支持偽類 :active ，其它第三方瀏覽器有部分不支持；

定義了 :active 并且當前瀏覽器環境支持，當手指在滾動或者無意間的劃過時，:active 狀態都會被激活；

為了規避上述所有的問題，如果需要 按下激活 狀態，推薦使用 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內核的瀏覽器。
今天先找這些明天繼續；

總結

以上是生活随笔為你收集整理的移动前端开发经验小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。