在網(wǎng)站開發(fā)的時(shí)候，除了需要開發(fā)PC端以外，移動端也是我們一部分客戶開發(fā)的重點(diǎn)，接下來成都網(wǎng)站開發(fā)人員為你講解移動端網(wǎng)站開發(fā)的小技巧：

　　一、移動端手機(jī)號碼的識別

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

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

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

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

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

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

　　開啟電話功能

　　123456

　　開啟短信功能：

　　123456

　　二、移動端郵箱識別(Android)

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

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

　　dooyoe@gmail.com

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

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

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

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

　　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)容充滿整個(gè)屏幕，頂部會被狀態(tài)欄遮擋。

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

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

　　ios 系統(tǒng)

　　默認(rèn)中文字體是Heiti SC

　　默認(rèn)英文字體是Helvetica

　　默認(rèn)數(shù)字字體是HelveticaNeue

　　無微軟雅黑字體

　　android 系統(tǒng)

　　默認(rèn)中文字體是Droidsansfallback

　　默認(rèn)英文和數(shù)字字體是Droid Sans

　　無微軟雅黑字體

　　winphone 系統(tǒng)

　　默認(rèn)中文字體是Dengxian(方正等線體)

　　默認(rèn)英文和數(shù)字字體是Segoe

　　無微軟雅黑字體

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

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

　　body{font-family:Helvetica;}

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

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

　　以下支持webkit

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

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

　　touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)

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

　　以下支持winphone 8

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

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

　　MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)

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

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

　　input,textarea {

　　border: 0; /* 方法1 */

　　-webkit-appearance: none; /* 方法2 */

    以上內(nèi)容由成都網(wǎng)站開發(fā)公司整理，希望對各位有所幫助。