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

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

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

7位數字，形如：1234567

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

雙連接線的數字，形如：00-00-00111

11位數字，形如：13800138000

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

開啟電話功能

123456

開啟短信功能：

123456

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

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

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

dooyoe@gmail.com

三、百度禁止轉碼

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

四、設置狀態欄的背景顏色(IOS)

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

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

六、移動端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 */

    以上內容由成都網站開發公司整理，希望對各位有所幫助。

分享名稱：淺談移動端網站的開發技巧
當前網址：http://m.newbst.com/news48/84798.html

成都網站建設公司_創新互聯，為您提供響應式網站、網站策劃、網站改版、ChatGPT、品牌網站設計、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯