最近一直在整理一些做移動端時遇到的問題，現在把他們列在一起，方便收藏查找：

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

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

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

在iOS中，默認情況下鍵盤是開啟首字母大寫的功能的，如果業務不想出現首字母大寫，可以這樣：

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

2、關閉iOS輸入自動修正

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

如果不需要的話，可以這樣：

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

3、禁止文本縮放

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

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

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

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

在iOS上，輸入框默認有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

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

5、郵箱地址識別

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

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

關閉郵箱地址識別：

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

開啟郵件發送：

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

6、移動端手機號碼識別

在 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>

7、快速回彈滾動

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

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

8、移動端禁止選中內容

如果你不想用戶可以選中頁面中的內容，那么你可以在css中禁掉：

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

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

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、如何禁止保存或拷貝圖像

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

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

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

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

?

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

轉載于:https://www.cnblogs.com/Doduo/p/7448916.html

總結

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

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