第1章.使用根字號(hào)rem作為字號(hào)單位
html{font-size:10px}
1.1使用媒體查詢,不同分辨率設(shè)置不同的html的font-size
@(min-width:320px){
html{font-size:10px;}
}@(min-width:360px){
html{font-size:11.25px;}
}@(min-width:400px){
html{font-size:12.5px;}
}@(min-width:640px){
html{font-size:20px;}
}
給手機(jī)設(shè)置10px的字體大??;對(duì)于320px的手機(jī)匹配是10px,其他手機(jī)都是等比例匹配;益吾庫(kù)
優(yōu)點(diǎn):使用CSS即可實(shí)現(xiàn),不需要JS代碼
缺點(diǎn):只能匹配部分機(jī)型
1.2使用JS代碼控制html的font-size大小益吾庫(kù)
var html = document.querySelector("html");var clientWidth = html.getBoundingClientRect().width;html.style.fontSize = clientWidth/18 + "px";
優(yōu)點(diǎn):可以匹配所有的機(jī)型,適配很強(qiáng)
缺點(diǎn):需要寫JS代碼益吾庫(kù)
第2章.禁止a,button,input,optgroup,select,textarea等標(biāo)簽背景變暗效果
在移動(dòng)端使用<a>標(biāo)簽做按鈕的時(shí)候或者文字鏈接的時(shí)候,點(diǎn)擊按鈕會(huì)出現(xiàn)一個(gè)“暗色的”背景,比如如下代碼:益吾庫(kù)
<a href="">button1</a><input type="button" value="提交">
在移動(dòng)端點(diǎn)擊之后 會(huì)出現(xiàn)“暗色的”背景,這時(shí)候我們需要在CSS中加入如下代碼即可:益吾庫(kù)
a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color:rgba(0,0,0,0);}123
第3章.meta基礎(chǔ)知識(shí)點(diǎn)益吾庫(kù)
3.1頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度,并禁止用戶縮放頁(yè)面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
益吾庫(kù)
屬性基本含義:
width=device-width:控制viewport的大小,device-width為設(shè)備的寬度
initial-scale:初始化縮放比例
minimum-scale:允許用戶縮放的最小比例
maximum-scale:允許用戶縮放的最大比例
user-scalable:用戶是否可以手動(dòng)縮放
3.2忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼益吾庫(kù)
<meta name="format-detection" content="telephone=no">
3.3忽略android平臺(tái)中對(duì)郵箱地址的識(shí)別益吾庫(kù)
<meta name="format-detection" content="email=no">
3.4當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式,可隱藏地址欄,僅針對(duì)ios的safari益吾庫(kù)
<meta name="apple-mobile-web-app-capable" content="yes">
3.5將網(wǎng)站添加到主屏幕快捷啟動(dòng)方式,頂端狀態(tài)條樣式,僅針對(duì)ios的safari益吾庫(kù)
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 可選default、black、black-translucent -->
3.6需要在網(wǎng)站的根目錄下存放favicon圖標(biāo),防止404請(qǐng)求(使用fiddler可以監(jiān)聽(tīng)到),在頁(yè)面上需要加link如下:益吾庫(kù)
<link rel="shortcut icon" href="/favicon.ico">
第4章.移動(dòng)端如何定義字體font-family益吾庫(kù)
body{ font-family:"Helvetica Neue",Helvetica,sans-serif}
第5章.在android或者ios下 撥打電話代碼如下益吾庫(kù)
<a href="tel:13341128625">撥打電話給:13341128625</a>
第6章.發(fā)短信(winphone系統(tǒng)無(wú)效)益吾庫(kù)
<a href="sms:10010">發(fā)短信給:10010</a>1
第7章.webkit表單輸入框placeholder的顏色值改變益吾庫(kù)
如果想要默認(rèn)的顏色顯示紅色,代碼如下:input::-webkit-input-placeholder{color:red}
如果想要用戶點(diǎn)擊變?yōu)樗{(lán)色,代碼如下:input:focus::-webkit-input-placeholder{color:blue}
第8章.移動(dòng)端IOS手機(jī)下清楚輸入框內(nèi)陰影益吾庫(kù)
input,textarea{-webkit-appearance:none;}1
第9章.在IOS中 禁止長(zhǎng)按鏈接與圖片彈出菜單益吾庫(kù)
a,img{-webkit-touch-callout:none}1
第10章.調(diào)用手機(jī)系統(tǒng)自帶的郵件功能益吾庫(kù)
10.1 當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí),瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)的客戶端電子郵件程序,并在收件人框中自動(dòng)填上收件人的地址下面
<p><a href="mailto:gugehua@126.com">發(fā)電子郵件</a></p>1
益吾庫(kù)
10.2 填寫抄送地址
在IOS手機(jī)下:在收件人地址后用?cc=開(kāi)頭,如下代碼:益吾庫(kù)
<p><a href="mailto:tugenhua@126.com?cc=123456789@qq.com">填寫抄送地址</a></p>
在android手機(jī)下,如下代碼:益吾庫(kù)
<p><a href="mailto:tugenhua@126.com?123456789@qq.com">填寫抄送地址</a></p>
10.3填上密件抄送地址益吾庫(kù)
在IOS手機(jī)下:緊跟著抄送地址之后,寫上&bcc=,填上密件抄送地址
<a href="mailto:tugenhua@126.com?cc=123456789@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
益吾庫(kù)
在安卓下;如下代碼:
<p><a href="mailto:tugenhua@126.com?123456789@qq.com?aa@qq.com">填上密件抄送地址</a></p>
益吾庫(kù)
10.4 包含多個(gè)收件人、抄送、密件抄送人,用分號(hào)隔(;)開(kāi)多個(gè)收件人的地址即可實(shí)現(xiàn)
<p><a href="mailto:gugehua@126.com;123456789@qq.com;aa@qq.com">包含多個(gè)收件人、抄送、密件抄送人,用分號(hào)隔(;)開(kāi)多個(gè)收件人的地址即可實(shí)現(xiàn)</a></p>
益吾庫(kù)
10.5 包含主題,用?subject=可以填上主題
<p><a href="mailto:gugehua@126.com?subject=【邀請(qǐng)函】">包含主題,可以填上主題</a></p>
益吾庫(kù)
10.6包含內(nèi)容,用?body=可以填上內(nèi)容(需要換行的話,使用%0A給文本換行)
<p><a href="mailto:gugehua@126.com?body=我來(lái)測(cè)試下">包含內(nèi)容,用?body=可以填上內(nèi)容</a></p>
益吾庫(kù)
10.7內(nèi)容包含鏈接,含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接
<p><a href="mailto:tugenhua@126.com?body=http://22321a.com">內(nèi)容包含鏈接,含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接</a></p>益吾庫(kù)
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)