整理web移動(dòng)端開(kāi)發(fā)經(jīng)驗(yàn)，部分內(nèi)容借鑒于網(wǎng)上的博文。

1、meta標(biāo)簽

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /><!-- width可視寬度，initial-scale初始化縮放比例，maximum-scale允許用戶(hù)縮放的最大比例，minimum-scale允許用戶(hù)縮放的最小比例，user-scalable是否允許用戶(hù)縮放。--><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行。刪除默認(rèn)的蘋(píng)果工具欄和菜單欄。如果content設(shè)置為yes，Web應(yīng)用會(huì)以全屏模式運(yùn)行，反之，則不會(huì)。content的默認(rèn)值是no，表示正常顯示。 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 控制狀態(tài)欄顯示樣式。設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。--><meta name="format-detection" content="telephone=no" /><!-- 禁止ios把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接 -->

?

2、屏蔽ios點(diǎn)擊元素時(shí)出現(xiàn)的陰影

-webkit-tap-highlight-color:rgba(255,255,255,0);

?

3、ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋

input,textarea {border: 0; -webkit-appearance: none; }

?

4、長(zhǎng)度單位用rem?

1rem = 16px;
html { <!-- 根元素 -->font-size:62.5%; } p {font-size:1rem; <!-- 字體大小等于 = 10px 16px*62.5% = 10px--> }

?

5、多用text-shadow這個(gè)屬性，可以美化文字效果

　　?border-radius、box-shadow、gradient、border-image，在移動(dòng)端都可以很好的支持，使用這些屬性可以實(shí)現(xiàn)很炫麗的按鈕。

?

6、iOS中禁止用戶(hù)保存圖片、復(fù)制圖片

　　img標(biāo)簽指定 -webkit-touch-callout:none; 可以禁止設(shè)備彈出列表按鈕，這樣用戶(hù)就無(wú)法保存/復(fù)制你的圖片。

?

7、禁止用戶(hù)進(jìn)行復(fù)制, 選擇

　　使用 -webkit-user-select: none;??user-select:none;

?

8、html5調(diào)用安卓或者ios的撥號(hào)功能

　　html5提供了自動(dòng)調(diào)用撥號(hào)的標(biāo)簽，只要在a標(biāo)簽的href中添加tel:就可以了。

　　如下：

　　<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>

　　撥打手機(jī)直接如下

　　<a href="tel:15677776767">點(diǎn)擊撥打15677776767</a>

?

9、長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退

element {-webkit-touch-callout:none; }

　　

10、設(shè)置緩存

　　手機(jī)頁(yè)面通常在第一次加載后會(huì)進(jìn)行緩存，然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache。

<meta http-equiv="Cache-Control" content="no-cache"/>

?

11、IOS鍵盤(pán)字母輸入，默認(rèn)首字母大寫(xiě)

　　解決方案，設(shè)置如下屬性

<input type="text" autocapitalize="off"/>

　　

12、關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時(shí)，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格

　　可以通過(guò)正則去掉

this.value = this.value.replace(/\u2006/g,'');

?

13、點(diǎn)擊事件

　　click 和 tap 比較兩者都會(huì)在點(diǎn)擊時(shí)觸發(fā)，但是在手機(jī)WEB端，click會(huì)有 200~300 ms的延遲，所以請(qǐng)用tap代替click作為點(diǎn)擊事件。

?

?

?

待續(xù)~~

轉(zhuǎn)載于:https://www.cnblogs.com/chenglu/p/7517882.html

總結(jié)

以上是生活随笔為你收集整理的web移动端开发经验总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。