移動端筆記--代碼分享

標籤：

移動端經常遇到的一些小總結，方便·以後使用：

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

     IOS的機子，預設英文IME狀態下，首字母是自動大寫的，autocapitalize的屬性可以實現關閉首字母大寫：

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

 2.關閉iOS輸入自動修正

    和英文輸入預設自動首字母大寫那樣，IOS做一個功能，預設IME會開啟自動修正輸入內容，這樣的話，使用者經常要操作兩次。所以這個功能有方便和不方便之處，如果有些業務不需要這個功能，可以通過前端代碼關閉。
    <input type="text" autocorrect="off" />

 3.禁止文本縮放

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

    PC端的該屬性已經被移除，該屬性在移動端要生效，必須設定 `meta viewport

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

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

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

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

 

5.郵箱地址識別

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

  關閉郵箱地址識別：<meta name="format-detection" content="email=no" />

  開啟郵件發送：     <a mailto:"[email protected]">[email protected]</a>

6.移動端手機號碼識別

  在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數文書處理為電話連結，

  可能還有其他類型的數字也會被識別，但在具體的業務情境中，有些時候這是不必須的，所以你可以關閉電話自動識別，然後在需要撥號的地方，開啟電話呼出和簡訊功能。

  關閉電話識別：<meta name="format-detection" content="telephone=no" />

  開啟電話功能：<a href="tel:123456">123456</a>

  開啟簡訊功能：<a href="sms:123456">123456</a>

7.移動端禁止選中內容

  如果你不想使用者可以選中頁面中的內容，那麼你可以在css中禁掉(只有webkit支援)：div {-webkit-user-select: none;}

 

8.移動端取消touch高亮效果

   在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設定了偽類 :active 的元素，預設都會在啟用狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方    法來禁止：.xxx {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

9.如何禁止儲存或拷貝映像

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

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

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

10.快速回彈滾動

  早起，移動端的瀏覽器都不支援非body元素的捲軸，所以一般都藉助 iScroll;

  .xxx {overflow: auto; /* auto | scroll */-webkit-overflow-scrolling: touch;}

 

移動端筆記--代碼分享