移動Web開發小結
阿新 • • 發佈：2019-01-04
HTML
設定頁面寬度等於裝置寬度，並禁止使用者縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
忽略頁面中的數字識別為電話，忽略email識別
<meta name="format-detection" content="telphone=no, email=no" />開啟對web app程式的支援（僅針對IOS系統）
網站開啟對web app程式的支援，其實意思就是刪除預設的蘋果工具欄和選單欄，開啟全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />改變頂部狀態條的顏色（僅針對IOS系統）
在 web app 下狀態條（螢幕頂部條）的顏色預設值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；
<meta name="apple-mobile-web-app-status-bar-style" content="black" />完整的HTML模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telphone=no, email=no" /> <title>標題</title> </head> <body> 這裡開始內容 </body> </html>
CSS
css reset
html{ -webkit-tap-highlight-color: rgba(0,0,0,0); /*去掉觸控遮蓋層*/ -webkit-user-modify: read-write-plaintext-only; -webkit-user-select: none; /*禁止使用者選擇文字*/ } /*設定所有盒子大小計算邊框內*/ *, *:before, *:after { box-sizing: border-box; } /*消除輸入框的陰影和邊框*/ input,textarea, select{ -webkit-appearance: none; /*去掉webkit預設的表單樣式*/ appearance: none; outline: none; border: none; }
消除transition動畫閃屏
.animate {
-webkit-transform-style: preserve-3d; /*設定內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden; /*設定進行轉換的元素的背面在面對使用者時是否可見：隱藏*/
}開啟硬體加速
解決頁面閃白，保證動畫流暢。
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}其他
關於打電話、發簡訊、發郵件的實現
<a href="tel:10086">打電話給：10086</a>
<a href="sms:10086">發簡訊給：10086</a>
<a href="mailto:[email protected]">發郵件給：[email protected]</a>