html5移動端網頁前端代碼重要知識點

2018-04-28網站百科16530
  • 詳情內容
  • 留言點評

第1章.使用根字號rem作為字號單位

html{font-size:10px}

1.1使用媒體查詢,不同分辨率設置不同的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;}
}

給手機設置10px的字體大小;對于320px的手機匹配是10px,其他手機都是等比例匹配;

優點:使用CSS即可實現,不需要JS代碼 
缺點:只能匹配部分機型

1.2使用JS代碼控制html的font-size大小

var html = document.querySelector("html");var clientWidth = html.getBoundingClientRect().width;html.style.fontSize = clientWidth/18 + "px";

優點:可以匹配所有的機型,適配很強 
缺點:需要寫JS代碼

第2章.禁止a,button,input,optgroup,select,textarea等標簽背景變暗效果

在移動端使用<a>標簽做按鈕的時候或者文字鏈接的時候,點擊按鈕會出現一個“暗色的”背景,比如如下代碼:

<a href="">button1</a><input type="button" value="提交">

在移動端點擊之后 會出現“暗色的”背景,這時候我們需要在CSS中加入如下代碼即可:

a,button,input,optgroup,select,textarea{    -webkit-tap-highlight-color:rgba(0,0,0,0);}123

第3章.meta基礎知識點

3.1頁面窗口自動調整到設備寬度,并禁止用戶縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

屬性基本含義: 
width=device-width:控制viewport的大小,device-width為設備的寬度 
initial-scale:初始化縮放比例 
minimum-scale:允許用戶縮放的最小比例 
maximum-scale:允許用戶縮放的最大比例 
user-scalable:用戶是否可以手動縮放

3.2忽略將頁面中的數字識別為電話號碼

<meta name="format-detection" content="telephone=no">

3.3忽略android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no">

3.4當網站添加到主屏幕快速啟動方式,可隱藏地址欄,僅針對ios的safari

<meta name="apple-mobile-web-app-capable" content="yes">

3.5將網站添加到主屏幕快捷啟動方式,頂端狀態條樣式,僅針對ios的safari

<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 可選default、black、black-translucent -->

3.6需要在網站的根目錄下存放favicon圖標,防止404請求(使用fiddler可以監聽到),在頁面上需要加link如下:

<link rel="shortcut icon" href="/favicon.ico">

第4章.移動端如何定義字體font-family

body{    font-family:"Helvetica Neue",Helvetica,sans-serif}

第5章.在android或者ios下 撥打電話代碼如下

<a href="tel:13341128625">撥打電話給:13341128625</a>

第6章.發短信(winphone系統無效)

<a href="sms:10010">發短信給:10010</a>1

第7章.webkit表單輸入框placeholder的顏色值改變

如果想要默認的顏色顯示紅色,代碼如下:input::-webkit-input-placeholder{color:red}
如果想要用戶點擊變為藍色,代碼如下:input:focus::-webkit-input-placeholder{color:blue}

第8章.移動端IOS手機下清楚輸入框內陰影

input,textarea{-webkit-appearance:none;}1

第9章.在IOS中 禁止長按鏈接與圖片彈出菜單

a,img{-webkit-touch-callout:none}1

第10章.調用手機系統自帶的郵件功能

10.1 當瀏覽者點擊這個鏈接時,瀏覽器會自動調用默認的客戶端電子郵件程序,并在收件人框中自動填上收件人的地址下面

<p><a href="mailto:[email protected]">發電子郵件</a></p>1

10.2 填寫抄送地址

在IOS手機下:在收件人地址后用?cc=開頭,如下代碼:

<p><a href="mailto:[email protected][email protected]">填寫抄送地址</a></p>

在android手機下,如下代碼:

<p><a href="mailto:[email protected][email protected]">填寫抄送地址</a></p>

10.3填上密件抄送地址

在IOS手機下:緊跟著抄送地址之后,寫上&bcc=,填上密件抄送地址

<a href="mailto:[email protected][email protected]&[email protected]">填上密件抄送地址</a>

在安卓下;如下代碼:

<p><a href="mailto:[email protected][email protected][email protected]">填上密件抄送地址</a></p>

10.4 包含多個收件人、抄送、密件抄送人,用分號隔(;)開多個收件人的地址即可實現

<p><a href="mailto:[email protected];[email protected];[email protected]">包含多個收件人、抄送、密件抄送人,用分號隔(;)開多個收件人的地址即可實現</a></p>

10.5 包含主題,用?subject=可以填上主題

<p><a href="mailto:[email protected]?subject=【邀請函】">包含主題,可以填上主題</a></p>

10.6包含內容,用?body=可以填上內容(需要換行的話,使用%0A給文本換行)

<p><a href="mailto:[email protected]?body=我來測試下">包含內容,用?body=可以填上內容</a></p>

10.7內容包含鏈接,含http(s)://等的文本自動轉化為鏈接

<p><a href="mailto:[email protected]?body=http://www.baidu.com">內容包含鏈接,含http(s)://等的文本自動轉化為鏈接</a></p>

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金