html5移动端知识点总结（一）

第1章 使用rem作为单位

<code class="hljs css has-numbering"><span class="hljs-tag">html</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">10</span>px</span></span></span>}</code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

1.1使用媒体查询，不同分辨率设置不同的html的font-size

<code class="hljs css has-numbering"><span class="hljs-at_rule">@<span class="hljs-keyword">(min-width:320px){</span>    html</span>{<span class="hljs-tag">font-size</span><span class="hljs-pseudo">:10px</span>;}}<span class="hljs-at_rule">@<span class="hljs-keyword">(min-width:360px){</span>    html</span>{<span class="hljs-tag">font-size</span><span class="hljs-pseudo">:11</span><span class="hljs-class">.25px</span>;}}<span class="hljs-at_rule">@<span class="hljs-keyword">(min-width:400px){</span>    html</span>{<span class="hljs-tag">font-size</span><span class="hljs-pseudo">:12</span><span class="hljs-class">.5px</span>;}}<span class="hljs-at_rule">@<span class="hljs-keyword">(min-width:640px){</span>    html</span>{<span class="hljs-tag">font-size</span><span class="hljs-pseudo">:20px</span>;}}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

给手机设置10px的字体大小；对于320px的手机匹配是10px，其他手机都是等比例匹配；

优点：使用CSS即可实现，不需要JS代码
缺点：只能匹配部分机型

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

<code class="hljs avrasm has-numbering">var html = document<span class="hljs-preprocessor">.querySelector</span>(<span class="hljs-string">"html"</span>)<span class="hljs-comment">;</span>var clientWidth = html<span class="hljs-preprocessor">.getBoundingClientRect</span>()<span class="hljs-preprocessor">.width</span><span class="hljs-comment">;</span>html<span class="hljs-preprocessor">.style</span><span class="hljs-preprocessor">.fontSize</span> = clientWidth/<span class="hljs-number">18</span> + <span class="hljs-string">"px"</span><span class="hljs-comment">;</span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul>

优点：可以匹配所有的机型，适配很强
缺点：需要写JS代码

第2章禁止a,button,input,optgroup,select,textarea等标签背景变暗效果

在移动端使用<a>标签做按钮的时候或者文字链接的时候，点击按钮会出现一个“暗色的”背景，比如如下代码：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>></span>button1<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"提交"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul>

在移动端点击之后 会出现“暗色的”背景，这时候我们需要在CSS中加入如下代码即可：

<code class="hljs css has-numbering"><span class="hljs-tag">a</span>,<span class="hljs-tag">button</span>,<span class="hljs-tag">input</span>,<span class="hljs-tag">optgroup</span>,<span class="hljs-tag">select</span>,<span class="hljs-tag">textarea</span><span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">-webkit-tap-highlight-color</span>:<span class="hljs-value"><span class="hljs-function">rgba(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)</span></span></span>;<span class="hljs-rule">}</span></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul>

第3章 meta基础知识点

3.1页面窗口自动调整到设备宽度，并禁止用户缩放页面

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

属性基本含义：
width=device-width:控制viewport的大小，device-width为设备的宽度
initial-scale：初始化缩放比例
minimum-scale：允许用户缩放的最小比例
maximum-scale：允许用户缩放的最大比例
user-scalable：用户是否可以手动缩放

3.2忽略将页面中的数字识别为电话号码

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"format-detection"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"telephone=no"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

3.3忽略android平台中对邮箱地址的识别

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"format-detection"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"email=no"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

3.4当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"apple-mobile-web-app-capable"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"yes"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

3.5将网站添加到主屏幕快捷启动方式，顶端状态条样式，仅针对ios的safari

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"apple-mobile-web-app-status-bar-style"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"black"</span>/></span><span class="hljs-comment"><!-- 可选default、black、black-translucent --></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul>

3.6需要在网站的根目录下存放favicon图标，防止404请求（使用fiddler可以监听到），在页面上需要加link如下：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"shortcut icon"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/favicon.ico"</span>/></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

第4章 移动端如何定义字体font-family

<code class="hljs css has-numbering"><span class="hljs-tag">body</span><span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"><span class="hljs-string">"Helvetica Neue"</span>,Helvetica,sans-serif</span></span></span>}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul>

第5章 在android或者ios下 拨打电话代码如下

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"tel:[phone]"</span>></span>拨打电话给：13341128625<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

第6章 发短信（winphone系统无效）

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"sms:10010"</span>></span>发短信给：10010<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

第7章 webkit表单输入框placeholder的颜色值改变

<code class="hljs ruby has-numbering">如果想要默认的颜色显示红色，代码如下：<span class="hljs-symbol">input:</span><span class="hljs-symbol">:-webkit-input-placeholder</span>{<span class="hljs-symbol">color:</span>red}如果想要用户点击变为蓝色，代码如下：<span class="hljs-symbol">input:</span><span class="hljs-symbol">focus:</span><span class="hljs-symbol">:-webkit-input-placeholder</span>{<span class="hljs-symbol">color:</span>blue}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul>

第8章 移动端IOS手机下清楚输入框内阴影

<code class="hljs css has-numbering"><span class="hljs-tag">input</span>,<span class="hljs-tag">textarea</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">-webkit-appearance</span>:<span class="hljs-value">none</span></span>;<span class="hljs-rule">}</span></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

第9章 在IOS中 禁止长按链接与图片弹出菜单

<code class="hljs lasso has-numbering">a,img{<span class="hljs-attribute">-webkit</span><span class="hljs-attribute">-touch</span><span class="hljs-attribute">-callout</span>:<span class="hljs-literal">none</span>}</code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

第10章 调用手机系统自带的邮件功能

10.1 当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]"</span>></span>发电子邮件<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

10.2 填写抄送地址

在iOS手机下：在收件人地址后用?cc=开头，如下代码：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?cc=[e-mail]"</span>></span>填写抄送地址<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

在Android手机下，如下代码：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?[e-mail]"</span>></span>填写抄送地址<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

10.3填上密件抄送地址

在IOS手机下：紧跟着抄送地址之后，写上&bcc=，填上密件抄送地址

<code class="hljs perl has-numbering"><a href=<span class="hljs-string">"mailto:tugenhua<span class="hljs-variable">@126</span>.com?cc=879083421<span class="hljs-variable">@qq</span>.com&bcc=aa<span class="hljs-variable">@qq</span>.com"</span>>填上密件抄送地址<<span class="hljs-regexp">/a></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

在安卓下;如下代码：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?[e-mail]?[e-mail]"</span>></span>填上密件抄送地址<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

10.4 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail];[e-mail];[e-mail]"</span>></span>包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

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

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?subject=【邀请函】"</span>></span>包含主题，可以填上主题<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

10.6包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?body=我来测试下"</span>></span>包含内容，用?body=可以填上内容<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span></code><ul class="pre-numbering" style=""><li>1</li></ul><ul class="pre-numbering" style=""><li>1</li></ul>

10.7内容包含链接，含http(s)://等的文本自动转化为链接

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"mailto:[e-mail]?body=http://www.baidu.com"</span>></span>内容包含链接，含http(s)://等的文本自动转化为链接<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>>原文：http://blog.csdn.net/haozhoupan/article/details/52540356</span></code>