移動開發小技巧

標籤：

1、頁面meta之viewport

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">

width可是寬度，initial-scale初始化縮放比例
maximum-scale允許使用者縮放的最大比例
minimum-scale允許使用者縮放的最小比例
user-scalable是否允許使用者縮放

2、關閉iOS鍵盤首字母自動大寫
    IOS的機子，預設英文IME狀態下，首字母是自動大寫的，有時候挺煩人的，  如果想關閉自動大寫可以通過autocapitalize屬性實現：

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

 

3、關閉iOS輸入自動修正

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

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

 

4、禁止文本縮放

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

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

 

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

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

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

 

6、郵箱地址識別

　　關閉郵箱地址識別：

關閉郵箱地址識別：<meta name="format-detection" content="email=no" />開啟郵件發送：<a mailto:[email protected]">[email protected]</a>

 

7、移動端手機號碼識別

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

 

8、快速回彈滾動

    我們先來看看回彈滾動在手機瀏覽器發展的曆史：
    * 早期的時候，移動端的瀏覽器都不支援非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

 

9、移動端禁止選中內容

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

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

 

10、移動端取消touch高亮效果
    在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設定了偽類 :active 的元素，預設都會在啟用狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來禁止：

.xxx {    -webkit-tap-highlight-color:rgba(255,255,255,0)可以同時屏蔽ios點擊元素時出現的陰影。}

 

11、如何禁止儲存或拷貝映像

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

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

 

12、動畫加速

　　-webkit-transform:translate3d(0, 0, 0)

　　在ios下可以讓動畫更加流暢（這個屬性會調用硬體加速模式），但是在android下不可亂用，會產生很多見所未見的bug。

 

移動開發小技巧