移動端前端筆記大全

最近一直在整理一些作移動端時遇到的問題，如今把他們列在一塊兒，方便收藏查找：

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

IOS的機子，默認英文輸入法狀態下，首字母是自動大寫的，有時候挺煩人的。

咱們寫頁面的時候有沒有辦法把這個自動大寫關閉呢？autocapitalize的屬性能夠實現：

在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是業務不想出現首字母大寫，能夠這樣：

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

二、關閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣，IOS還作了一個功能，默認輸入法會開啓自動修正輸入內容，這樣的話，用戶常常要操做兩次。因此這個功能有方便和不方便之處，若是有些業務不須要這個功能，能夠經過前端代碼關閉。

若是不須要的話，能夠這樣：

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

三、禁止文本縮放

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

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

須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 `meta viewport'。

四、移動端如何清除輸入框內陰影

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

五、郵箱地址識別

今天來mark一下在作移動端開發時，如何作郵箱地址識別：

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

關閉郵箱地址識別：

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

開啓郵件發送：

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

六、移動端手機號碼識別

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

• 7位數字，形如：1234567
• 帶括號及加號的數字，形如：(+86)123456789
• 雙鏈接線的數字，形如：00-00-00111
• 11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別，但在具體的業務場景中，有些時候這是沒必要須的，因此你能夠關閉電話自動識別，而後在須要撥號的地方，開啓電話呼出和短信功能。

（1）關閉電話識別：

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

（2）開啓電話功能：

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

（3）開啓短信功能：

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

七、快速回彈滾動

咱們先來看看回彈滾動在手機瀏覽器發展的歷史：

• 早期的時候，移動端的瀏覽器都不支持非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;
  }

PS：iScroll用過以後感受不是很好，有一些詭異的bug，這裏推薦另一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），並且還有回彈滾動的內置滾動條，官方地址：
http://www.idangero.us/sliders/swiper/index.php

<

div>

八、移動端禁止選中內容

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

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

就這麼簡單，可是目前只支持webkit內核的瀏覽器。

九、移動端取消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標籤換成其它標籤，能夠解決這個問題。

十、如何禁止保存或拷貝圖像

作移動端H5頁面時，常常踩到很多坑，感受也是時候整理一下移動端開發筆記了，遇到問題可以快速響應，節省開發時間。今天先mark一下在移動端如何禁止保存或拷貝圖像：

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

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

PS：須要注意的是，該方法只在 iOS 上有效。

出處：w3cmark (http://www.w3cmark.com/2015/398.html)