移動 Web 開發技巧

最近一直有人問，移動端的頁面怎麼寫啊？要注意什麼啊？和PC頁面有什麼區別？……  就會有不少的疑問。其實要我回答這些問題可能也不知道怎麼回答小夥伴。我也沒有專門學習過移動端的製做，大部分都是工做後慢慢捉摸的。

今天給你們分享一些移動端 web 開發的小技巧吧！

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

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

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

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

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

開啓電話功能

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

開啓短信功能：

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

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

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

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

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

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

3、百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

4、設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 「apple-mobile-web-app-capable」 content=」yes」 時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 參數：

• default ：狀態欄背景是白色。
• black ：狀態欄背景是黑色。
• black-translucent ：狀態欄背景是半透明。 若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。 若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

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

三大手機系統的字體：

ios 系統

• 默認中文字體是Heiti SC
• 默認英文字體是Helvetica
• 默認數字字體是HelveticaNeue
• 無微軟雅黑字體

android 系統

• 默認中文字體是Droidsansfallback
• 默認英文和數字字體是Droid Sans
• 無微軟雅黑字體

winphone 系統

• 默認中文字體是Dengxian(方正等線體)
• 默認英文和數字字體是Segoe
• 無微軟雅黑字體

各個手機系統有本身的默認字體，且都不支持微軟雅黑 如無特殊需求，手機端無需定義中文字體，使用系統默認 英文字體和數字字體可以使用 Helvetica ，三種系統都支持

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

body{font-family:Helvetica;}

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

對於只須要適配手機設備，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

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

7、移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

如下支持webkit

• touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
• touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
• touchend——當手指離開屏幕時觸發
• touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

如下支持winphone 8

• MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
• MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
• MSPointerUp——當手指離開屏幕時觸發

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

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

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

今天就分享到這裏了，這些小技巧在咱們平常使用中很是有用。若是你在工做中遇到什麼BUG 或者收穫了什麼好的經驗技巧能夠給我留言。

 

下期分享敬請期待！ 小月博客