移動(dòng)Web開發(fā)小結(jié)
作者：funnyF2E
在做移動(dòng) Web 開發(fā)時(shí)有很多地方跟 PC 端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動(dòng) Web 開發(fā)中有用的設(shè)置和一些通用代碼。
在做移動(dòng) Web 開發(fā)時(shí)有很多地方跟 PC 端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動(dòng) Web 開發(fā)中有用的設(shè)置和一些通用代碼。
HTML
設(shè)置頁(yè)面寬度等于設(shè)備寬度，并禁止用戶縮放頁(yè)面
- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
忽略頁(yè)面中的數(shù)字識(shí)別為電話，忽略email識(shí)別
- <meta name="format-detection" content="telphone=no, email=no" />
開啟對(duì)web app程序的支持(僅針對(duì)IOS系統(tǒng))
網(wǎng)站開啟對(duì)web app程序的支持，其實(shí)意思就是刪除默認(rèn)的蘋果工具欄和菜單欄，開啟全屏顯示
- <meta name="apple-mobile-web-app-capable" content="yes" />
改變頂部狀態(tài)條的顏色(僅針對(duì)IOS系統(tǒng))
在 web app 下狀態(tài)條(屏幕頂部條)的顏色默認(rèn)值為 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>標(biāo)題</title>
- </head>
- <body>
- 這里開始內(nèi)容
- </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;/*禁止用戶選擇文字*/
- }
- /*設(shè)置所有盒子大小計(jì)算邊框內(nèi)*/
- *,
- *:before,
- *:after {
- box-sizing: border-box;
- }
- /*消除輸入框的陰影和邊框*/
- input,textarea, select{
- -webkit-appearance: none; /*去掉webkit默認(rèn)的表單樣式*/
- appearance: none;
- outline: none;
- border: none;
- }
消除transition動(dòng)畫閃屏
- .animate {
- -webkit-transform-style: preserve-3d; /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
- -webkit-backface-visibility: hidden; /*設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏*/
- }
開啟硬件加速
解決頁(yè)面閃白，保證動(dòng)畫流暢。
- .css {
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
其他
關(guān)于打電話、發(fā)短信、發(fā)郵件的實(shí)現(xiàn)
- <a href="tel:10086">打電話給：10086</a>
- <a href="sms:10086">發(fā)短信給：10086</a>
- <a href="mailto:zhangxy_92@outlook.com">發(fā)郵件給：zhangxy_92@outlook.com</a>
關(guān)于布局
移動(dòng)端中對(duì)于flexbox的支持已經(jīng)很好，flexbox是布局神器。阮一峰老師寫過flexbox 入門教程;以后自己可能也會(huì)寫一篇flexbox的學(xué)習(xí)和總結(jié)筆記。
責(zé)任編輯：龐桂玉
來源：
segmentfault
