最近一直有人問,移動端的頁面怎么寫?。恳⒁馐裁窗。亢蚉C頁面有什么區(qū)別?…… 就會有很多的疑問。其實要我回答這些問題可能也不知道怎么回答小伙伴。我也沒有專門學(xué)習(xí)過移動端的制作,大部分都是工作后慢慢捉摸的。小月博客這幾天會專門分享關(guān)于移動端的小技巧請多多關(guān)注哦
創(chuàng)新互聯(lián)是一家專業(yè)提供容城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為容城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
今天給大家分享一些移動端 web 開發(fā)的小技巧吧!
在 iOS Safari (其他瀏覽器和Android均不會)上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接,比如:
7位數(shù)字,形如:1234567
帶括號及加號的數(shù)字,形如:(+86)123456789
雙連接線的數(shù)字,形如:00-00-00111
11位數(shù)字,形如:13800138000
可能還有其他類型的數(shù)字也會被識別。我們可以通過如下的meta來關(guān)閉電話號碼的自動識別:
<meta name="format-detection" content="telephone=no" />
開啟電話功能
<a href="tel:123456">123456</a>
開啟短信功能:
<a href="sms:123456">123456</a>
與電話號碼的識別一樣,在安卓上會對符合郵箱格式的字符串進(jìn)行識別,我們可以通過如下的meta來管別郵箱的自動識別:
<meta content="email=no" name="format-detection" />
同樣地,我們也可以通過標(biāo)簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
通過百度手機(jī)打開網(wǎng)頁時,百度可能會對你的網(wǎng)頁進(jìn)行轉(zhuǎn)碼,往你頁面貼上它的廣告,非常之惡心。不過我們可以通過這個meta標(biāo)簽來禁止它:
<meta http-equiv="Cache-Control" content="no-siteapp" />
設(shè)置狀態(tài)欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content 參數(shù):
default :狀態(tài)欄背景是白色。
black :狀態(tài)欄背景是黑色。
black-translucent :狀態(tài)欄背景是半透明。 如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。 如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕,頂部會被狀態(tài)欄遮擋。
三大手機(jī)系統(tǒng)的字體:
ios 系統(tǒng)
默認(rèn)中文字體是Heiti SC
默認(rèn)英文字體是Helvetica
默認(rèn)數(shù)字字體是HelveticaNeue
無微軟雅黑字體
android 系統(tǒng)
默認(rèn)中文字體是Droidsansfallback
默認(rèn)英文和數(shù)字字體是Droid Sans
無微軟雅黑字體
winphone 系統(tǒng)
默認(rèn)中文字體是Dengxian(方正等線體)
默認(rèn)英文和數(shù)字字體是Segoe
無微軟雅黑字體
各個手機(jī)系統(tǒng)有自己的默認(rèn)字體,且都不支持微軟雅黑 如無特殊需求,手機(jī)端無需定義中文字體,使用系統(tǒng)默認(rèn) 英文字體和數(shù)字字體可使用 Helvetica ,三種系統(tǒng)都支持
* 移動端定義字體的代碼 */
body{font-family:Helvetica;}
對于只需要適配手機(jī)設(shè)備,使用px即可
對于需要適配各種移動設(shè)備,使用rem,例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備
rem配置參考:
html { font-size:10px } @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }
當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件
以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面,會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動
touchend——當(dāng)手指離開屏幕時觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框,此時會觸發(fā)該事件,這個事件比較少用
以下支持winphone 8
MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面,會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動
MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)
在iOS上,輸入框默認(rèn)有內(nèi)部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣關(guān)閉:
input,textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ }
今天就分享到這里了,這些小技巧在我們?nèi)粘J褂弥蟹浅S杏谩H绻阍诠ぷ髦杏龅绞裁碆UG 或者收獲了什么好的經(jīng)驗技巧可以給我留言。
文章名稱:移動Web開發(fā)技巧
網(wǎng)站地址:http://muchs.cn/article6/pdpcog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)