最近一直有人問，移動端的頁面怎麼寫啊？要註意什麼啊？和PC頁面有什麼區別？…… 就會有很多的疑問。其實要我回答這些問題可能也不知道怎麼回答小伙伴。我也沒有專門學習過移動端的製作，大部分都是工作後慢慢捉摸的。 今天給大家分享一些移動端 web 開發的小技巧吧！ 一、移動端手機號碼的識別 在 iOS S ...
最近一直有人問，移動端的頁面怎麼寫啊？要註意什麼啊？和PC頁面有什麼區別？…… 就會有很多的疑問。其實要我回答這些問題可能也不知道怎麼回答小伙伴。我也沒有專門學習過移動端的製作，大部分都是工作後慢慢捉摸的。
今天給大家分享一些移動端 web 開發的小技巧吧！
一、移動端手機號碼的識別
在 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>
二、移動端郵箱識別（Android）
與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字元串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：
<meta content="email=no" name="format-detection" />
同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：
<a mailto:[email protected]">[email protected]</a>
三、百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之噁心。不過我們可以通過這個meta標簽來禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />
四、設置狀態欄的背景顏色（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 ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
五、移動端如何定義字體font-family
三大手機系統的字體：
ios 系統
- 預設中文字體是Heiti SC
- 預設英文字體是Helvetica
- 預設數字字體是HelveticaNeue
- 無微軟雅黑字體
android 系統
- 預設中文字體是Droidsansfallback
- 預設英文和數字字體是Droid Sans
- 無微軟雅黑字體
winphone 系統
- 預設中文字體是Dengxian(方正等線體)
- 預設英文和數字字體是Segoe
- 無微軟雅黑字體
各個手機系統有自己的預設字體，且都不支持微軟雅黑 如無特殊需求，手機端無需定義中文字體，使用系統預設 英文字體和數字字體可使用 Helvetica ，三種系統都支持
* 移動端定義字體的代碼 */
body{font-family:Helvetica;}
六、移動端字體單位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
}
}
七、移動端touch事件(區分webkit 和 winphone)
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
以下支持webkit
- touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
- touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
- touchend——當手指離開屏幕時觸發
- touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
以下支持winphone 8
- MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指
- MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
- MSPointerUp——當手指離開屏幕時觸發
八、移動端如何清除輸入框內陰影
在iOS上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：
input,textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
今天就分享到這裡了，這些小技巧在我們日常使用中非常有用。如果你在工作中遇到什麼BUG 或者收穫了什麼好的經驗技巧可以給我留言。
下期分享敬請期待！ 小月博客
