移動端頁面開發需要注意什么

工作了有一段時間，基本上都在搞移動端的前端開發，工作的過程中遇到過很多問題，bug的解決方案，記錄下來，以便后用！！！內容并不是很全，以后每遇到一個問題都會總結在這里，成都網站建設分享給大家！

一、meta標簽相關知識

1、移動端頁面設置視口寬度等于設備寬度，并禁止縮放。

1

2、移動端頁面設置視口寬度等于定寬（如640px），并禁止縮放，常用于微信瀏覽器頁面。

1

3、禁止將頁面中的數字識別為電話號碼

1

4、忽略Android平臺中對郵箱地址的識別

1

5、當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari

1 2

6、將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

1 2 viewport模板 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 content...
二、CSS樣式技巧

1、禁止ios和android用戶選中文字

1 .css{-webkit-user-select:none}

2、禁止ios長按時觸發系統的菜單，禁止ios&android長按時下載圖片

1 .css{-webkit-touch-callout:none}

3、webkit去除表單元素的默認樣式

1 .css{-webkit-appearance:none;}

4、修改webkit表單輸入框placeholder的樣式

1 2 input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}

5、去除android a/button/input標簽被點擊時產生的邊框 & 去除ios a標簽被點擊時產生的半透明灰色背景

1 a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

6、ios使用-webkit-text-size-adjust禁止調整字體大小

1 body{-webkit-text-size-adjust:100%!important;}

7、android 上去掉語音輸入按鈕

1 input::-webkit-input-speech-button {display:none}

8、移動端定義字體，移動端沒有微軟雅黑字體

1 2 /* 移動端定義字體的代碼 */ body{font-family:Helvetica;}
三、其他技巧

1、手機拍照和上傳圖片

1 2 3 4 網站題目：移動端頁面開發需要注意什么
鏈接地址：http://m.kartarina.com/news/216039.html

成都網站建設公司_創新互聯，為您提供ChatGPT、關鍵詞優化、Google、動態網站、響應式網站、域名注冊

廣告

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