meta标签知识点总结
<meta>标签用于定义页面的说明、关键字等关于页面的元数据。在移动端页面的开发中，在设置meta标签过程中需要注意以下几点：
- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’（自动根据屏幕宽度获取）
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
- 禁止ios对数字的处理
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
- 关于浏览器的强制竖屏的设置
<!-- uc强制竖屏, QQ浏览器强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
audio标签在安卓中无法自动播放问题
在H5中使用audio标签实现
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持</audio>
解决方案：在js代码中，绑定播放音频动作，操作window的时候触发。
移动端打电话、调用照相机实现
- 打电话实现：
<a href="tel:10086">打电话给:10086</a> - 调用照相机：
<input type="file" accept="images/*" />
目前IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。
参考资料：https://segmentfault.com/a/1190000006140042
判断屏幕是横屏还是竖屏
分别可以用JS和CSS判断屏幕的横竖屏状态：
- JS判断
function orientInit(){
var orientChk = document.documentElement.clientWidth;
document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk == 'lapdscape'){ //横屏
}else{ //竖屏
}
}
- CSS使用媒体查询判断
//竖屏时样式
@media all and (orientation:portrait) { }
//横屏时样式
@media all and (orientation:landscape){ }</code>
引入二维码图片
二维码图片不要写为元素背景，不然长按没有办法触发扫描功能，应使用 img 标签引入。
参考资料：http://www.jianshu.com/p/e95824e8fe13
