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:zhangxy_92@outlook.com">發郵件給：zhangxy_92@outlook.com</a>
******************************************華麗分割線******************************************
關于布局:
移動端中對于flexbox的支持已經很好，flexbox是布局神器。阮一峰老師寫過flexbox 入門教程；
感謝作者：https://blog.csdn.net/qq_43258252/article/details/86538489
