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