移动端开发要点总结

meta标签知识点总结

标签用于定义页面的说明、关键字等关于页面的元数据。在移动端页面的开发中，在设置meta标签过程中需要注意以下几点：

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

// width    设置viewport宽度，为一个正整数，或字符串‘device-width’（自动根据屏幕宽度获取）
// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放

• 禁止ios对数字的处理

• 关于浏览器的强制竖屏的设置

audio标签在安卓中无法自动播放问题

在H5中使用audio标签实现

解决方案：在js代码中，绑定播放音频动作，操作window的时候触发。

移动端打电话、调用照相机实现

• 打电话实现：打电话给:10086
• 调用照相机：
  目前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){  }

引入二维码图片

二维码图片不要写为元素背景，不然长按没有办法触发扫描功能，应使用 img 标签引入。
参考资料：http://www.jianshu.com/p/e95824e8fe13