移動Web開發小結
作者：funnyF2E
在做移動 Web 開發時有很多地方跟 PC 端是不一樣的，需要不一樣的設置，這里就記錄下移動 Web 開發中有用的設置和一些通用代碼。
在做移動 Web 開發時有很多地方跟 PC 端是不一樣的，需要不一樣的設置，這里就記錄下移動 Web 開發中有用的設置和一些通用代碼。
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 入門教程;以后自己可能也會寫一篇flexbox的學習和總結筆記。
責任編輯：龐桂玉
來源：
segmentfault
