web移動端開發經驗總結

整理web移動端開發經驗，部份內容借鑑於網上的博文。

一、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把數字轉化爲撥號連接 -->

 

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

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

 

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

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

 

四、長度單位用rem 

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

 

五、多用text-shadow這個屬性，能夠美化文字效果

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

 

六、iOS中禁止用戶保存圖片、複製圖片

　　img標籤指定 -webkit-touch-callout:none; 能夠禁止設備彈出列表按鈕，這樣用戶就沒法保存/複製你的圖片。

 

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

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

 

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

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

　　以下：

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

　　撥打手機直接以下

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

 

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

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

　　

十、設置緩存

　　手機頁面一般在第一次加載後會進行緩存，而後每次刷新會使用緩存而不是去從新向服務器發送請求。若是不但願使用緩存能夠設置no-cache。

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

 

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

　　解決方案，設置以下屬性

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

　　

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

　　能夠經過正則去掉

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

 

1三、點擊事件

　　click 和 tap 比較二者都會在點擊時觸發，可是在手機WEB端，click會有 200~300 ms的延遲，因此請用tap代替click做爲點擊事件。

 

 

 

待續~~