web移動端開發經驗總結

標籤：中文IME   比例   移動端開發   自動調用   highlight   控制   樣式   mic   開發經驗   

整理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:就可以了。

 

　　如下：

 

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

 

　　撥打手機直接如下

 

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

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

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

 

10、設定緩衝

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

　　手機頁面通常在第一次載入後會進行緩衝，然後每次重新整理會使用緩衝而不是去重新向伺服器發送請求。如果不希望使用緩衝可以設定no-cache。

11、IOS鍵盤字母輸入，預設首字母大寫

　　解決方案，設定如下屬性

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

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

　　可以通過正則去掉

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

 

待續~~

web移動端開發經驗總結