移动web学习笔记
学习博客： 《移动资源整理》 BY 白树
meta基础知识：
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
viewport：
viewport 既不是W3C的正式标准，也不是Web标准。它是Apple公司首先在iPhone中的Safari浏览器中实现了viewport meta标签，然后，其他浏览器也快速采纳了。
@viewport CSS规则
使用@viewport规则和使用meta标签的效果一样。如：
@viewport{ width:device-width; zoom:2;//zoom等同于viewport meta标签中的initial-scale属性 max-zoom:3;//等同于maximum-scale min-zoom:0.50;//等同于minimum-scale user-zoom:fixed;// 等同于user-scaleble属性 }
@viewport 与 Media Query配合使用
可以在media query中使用@viewport，达到更加精准的优化。如
@media screen and(max-width:400px){ @-ms-viewport{width:320px;} .... }
IE10/11，opera，webkit，moz都支持，需要加厂商前缀
@-webkit-viewport{...} @-moz-viewport{...} @-ms-viewport{...} @-o-viewport{...} @viewport{...}
（下边这些是刚知道的）
忽略讲页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no"/>
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no"/>
format-detection
format-detection是“格式检测”，是用来检测html中的一些格式，除了telephone和email还可以设置adress
●telephone
一串没加链接的数字，iPhone会自动给加链接样式并且点击这串数字还会自动拨号。
telephone=no --- 禁止吧数字转化为拨号链接
telephone=yes（默认值） --- 开启吧数字转为拨号链接，
不识别邮箱，点击之后不会自动发送
email=no --- 禁止作为邮箱地址
email=yes（默认值） --- 开启把文字默认为邮箱地址
●adress
adress=no --- 禁止跳转到地图
adress=yes（默认值） --- 开启点击地址直接跳转到地图的功能。
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的Safari
<meta name="apple-mobile-web-app-capable" content="yes"/> <!-- ios7.0版本以后，Safari上已看不到效果 -->
apple-mobile-web-app-capable
content可取yes（默认值）和no，是否需要显示工具栏和菜单栏
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 可选default、black、black-translucent -->
apple-mobile-web-app-status-bar-style
控制状态栏显示样式，black-translucent(黑色加遮罩层的效果，显示)
viewport模板
viewport模板----通用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title>标题</title> </head> <body> 主体内容部分 </body> </html>
常见问题
移动端如何定义字体font-family
中文字体使用系统默认的，英文的用Helvetica
body{font-family:Helvetica;}
移动端字体单位font-size选择px还是rem
适配少部分手机设备，且分辨率对页面影响小，使用px
需要适配各种移动设备，使用rem
使用媒体查询设置根部字体的大小；
html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) 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){html{font-size:25px}}
rem和em的区分
rem(font size of the root element):是相对于跟元素的字体大小的单位。
兼容性：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+
em(font size of the element):是指相对于父元素的字体大小的单位。
计算公式：1/父元素的font-size*需要转换的像素值=em值
针对Android、IOS、Windows设备所有媒体查询学习网址
