移動(dòng)端頁(yè)面開發(fā)需要注意什么

2022-11-23 分類：網(wǎng)站建設(shè)

網(wǎng)站建設(shè) - 建站教程 - 網(wǎng)站定制開發(fā) - 移動(dòng)端頁(yè)面開發(fā)需要注意什么

工作了有一段時(shí)間，基本上都在搞移動(dòng)端的前端開發(fā)，工作的過(guò)程中遇到過(guò)很多問(wèn)題，bug的解決方案，記錄下來(lái)，以便后用?。?！內(nèi)容并不是很全，以后每遇到一個(gè)問(wèn)題都會(huì)總結(jié)在這里，成都網(wǎng)站建設(shè)分享給大家！

成都網(wǎng)站建設(shè)

一、meta標(biāo)簽相關(guān)知識(shí)

1、移動(dòng)端頁(yè)面設(shè)置視口寬度等于設(shè)備寬度，并禁止縮放。

1 <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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

1 <meta name="viewport"content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3、禁止將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼

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

4、忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別

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

5、當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)ios的safari

1 2 <meta name="apple-mobile-web-app-capable"content="yes" />

6、將網(wǎng)站添加到主屏幕快速啟動(dòng)方式，僅針對(duì)ios的safari頂端狀態(tài)條的樣式

1 2 <meta name="apple-mobile-web-app-status-bar-style"content="black" />  viewport模板 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"> <meta content="yes"name="apple-mobile-web-app-capable"> <meta content="black"name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no"name="format-detection"> <meta content="email=no"name="format-detection"> <title>title</title> <link rel="stylesheet"href="index.css"> </head> <body> content... </body> </html>
二、CSS樣式技巧

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

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

2、禁止ios長(zhǎng)按時(shí)觸發(fā)系統(tǒng)的菜單，禁止ios&android長(zhǎng)按時(shí)下載圖片

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

3、webkit去除表單元素的默認(rèn)樣式

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標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的邊框 & 去除ios a標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景

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

6、ios使用-webkit-text-size-adjust禁止調(diào)整字體大小

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

7、android 上去掉語(yǔ)音輸入按鈕

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

8、移動(dòng)端定義字體，移動(dòng)端沒有微軟雅黑字體

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

1、手機(jī)拍照和上傳圖片

1 2 3 4  <input type=fileaccept="image/*"

分享名稱：移動(dòng)端頁(yè)面開發(fā)需要注意什么
URL標(biāo)題：http://www.muchs.cn/news39/216039.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、靜態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、網(wǎng)站導(dǎo)航、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容