第1章 使用rem作為單位

html{font-size:10px}

• 1

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;} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

給手機設置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";

• 1
• 2
• 3

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

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

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

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

• 1
• 2

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

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

• 1
• 2
• 3

第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"/>

• 1

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

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

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

• 1

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

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

• 1

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

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

• 1

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

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

• 1
• 2

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

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

• 1

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

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

• 1
• 2
• 3

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

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

• 1

第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}

• 1
• 2
• 3
• 4

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

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

• 1

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

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

• 1

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

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

<p><a href="mailto:tugenhua@126.com">發電子郵件</a></p>

• 1

10.2 填寫抄送地址

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

<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填寫抄送地址</a></p>

• 1

在android手機下，如下代碼：

<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填寫抄送地址</a></p>

• 1

10.3填上密件抄送地址

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

<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>

• 1

在安卓下;如下代碼：

<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>

• 1

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

<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現</a></p>

• 1

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

<p><a href="mailto:tugenhua@126.com?subject=【邀請函】">包含主題，可以填上主題</a></p>

• 1

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

<p><a href="mailto:tugenhua@126.com?body=我來測試下">包含內容，用?body=可以填上內容</a></p>

• 1

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

<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">內容包含鏈接，含http(s)://等的文本自動轉化為鏈接</a></p>

轉載于:https://www.cnblogs.com/paul-3/p/5992608.html

總結

以上是生活随笔為你收集整理的h5移动端知识要点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。