整理web移動端開發經驗，部分內容借鑒于網上的博文。

1、meta標簽

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

?

2、屏蔽ios點擊元素時出現的陰影

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

?

3、ios 設置input 按鈕樣式會被默認樣式覆蓋

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

?

4、長度單位用rem?

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

?

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

　　?border-radius、box-shadow、gradient、border-image，在移動端都可以很好的支持，使用這些屬性可以實現很炫麗的按鈕。

?

6、iOS中禁止用戶保存圖片、復制圖片

　　img標簽指定 -webkit-touch-callout:none; 可以禁止設備彈出列表按鈕，這樣用戶就無法保存/復制你的圖片。

?

7、禁止用戶進行復制, 選擇

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

?

8、html5調用安卓或者ios的撥號功能

　　html5提供了自動調用撥號的標簽，只要在a標簽的href中添加tel:就可以了。

　　如下：

　　<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>

　　撥打手機直接如下

　　<a href="tel:15677776767">點擊撥打15677776767</a>

?

9、長時間按住頁面出現閃退

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

　　

10、設置緩存

　　手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。

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

?

11、IOS鍵盤字母輸入，默認首字母大寫

　　解決方案，設置如下屬性

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

　　

12、關于 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

　　可以通過正則去掉

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

?

13、點擊事件

　　click 和 tap 比較兩者都會在點擊時觸發，但是在手機WEB端，click會有 200~300 ms的延遲，所以請用tap代替click作為點擊事件。

?

?

?

待續~~

轉載于:https://www.cnblogs.com/chenglu/p/7517882.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。