最近一直有人問，移動端的頁面怎么寫??？要注意什么啊？和PC頁面有什么區(qū)別？……  就會有很多的疑問。其實要我回答這些問題可能也不知道怎么回答小伙伴。我也沒有專門學習過移動端的制作，大部分都是工作后慢慢捉摸的。小月博客這幾天會專門分享關(guān)于移動端的小技巧請多多關(guān)注哦

創(chuàng)新互聯(lián)是一家專業(yè)提供容城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為容城眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

今天給大家分享一些移動端 web 開發(fā)的小技巧吧！

一、移動端手機號碼的識別

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接，比如：

• • 7位數(shù)字，形如：1234567

  • 帶括號及加號的數(shù)字，形如：(+86)123456789

  • 雙連接線的數(shù)字，形如：00-00-00111

  • 11位數(shù)字，形如：13800138000

可能還有其他類型的數(shù)字也會被識別。我們可以通過如下的meta來關(guān)閉電話號碼的自動識別：

開啟電話功能

123456

開啟短信功能：

123456

二、移動端郵箱識別（Android）

與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能：

dooyoe@gmail.com

三、百度禁止轉(zhuǎn)碼

通過百度手機打開網(wǎng)頁時，百度可能會對你的網(wǎng)頁進行轉(zhuǎn)碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標簽來禁止它：

四、設(shè)置狀態(tài)欄的背景顏色（IOS）

設(shè)置狀態(tài)欄的背景顏色，只有在 “apple-mobile-web-app-capable” content=”yes” 時生效

content 參數(shù)：

• • default ：狀態(tài)欄背景是白色。

• • black ：狀態(tài)欄背景是黑色。

  • black-translucent ：狀態(tài)欄背景是半透明。 如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。 如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕，頂部會被狀態(tài)欄遮擋。

五、移動端如何定義字體font-family

三大手機系統(tǒng)的字體：

ios 系統(tǒng)

• • 默認中文字體是Heiti SC

  • 默認英文字體是Helvetica

  • 默認數(shù)字字體是HelveticaNeue

  • 無微軟雅黑字體

android 系統(tǒng)

• • 默認中文字體是Droidsansfallback

  • 默認英文和數(shù)字字體是Droid Sans

  • 無微軟雅黑字體

winphone 系統(tǒng)

• • 默認中文字體是Dengxian(方正等線體)

  • 默認英文和數(shù)字字體是Segoe

  • 無微軟雅黑字體

各個手機系統(tǒng)有自己的默認字體，且都不支持微軟雅黑 如無特殊需求，手機端無需定義中文字體，使用系統(tǒng)默認 英文字體和數(shù)字字體可使用 Helvetica ，三種系統(tǒng)都支持

* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

六、移動端字體單位font-size選擇px還是rem

對于只需要適配手機設(shè)備，使用px即可

對于需要適配各種移動設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備

rem配置參考：

html {
    font-size:10px
}
@media screen and (min-width:480px) and (max-width:639px) { 
    html {  
         font-size: 15px 
    }
}
@media screen and (min-width:640px) and (max-width:719px) { 
    html {       
         font-size: 20px
   }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {    
      font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
  html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

七、移動端touch事件(區(qū)分webkit 和 winphone)

當用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件

以下支持webkit

• touchstart——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指

• touchmove——當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動

• touchend——當手指離開屏幕時觸發(fā)

• touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用

以下支持winphone 8

• MSPointerDown——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指

• MSPointerMove——當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認情況的發(fā)生：阻止頁面滾動

• MSPointerUp——當手指離開屏幕時觸發(fā)

八、移動端如何清除輸入框內(nèi)陰影

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

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

今天就分享到這里了，這些小技巧在我們?nèi)粘Ｊ褂弥蟹浅Ｓ杏?。如果你在工作中遇到什么BUG 或者收獲了什么好的經(jīng)驗技巧可以給我留言。