- 修改HTML项 5
- 新增配置项 7
不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度
2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开
3. 强制浏览器全屏(UC/QQ)就是浏览器全屏，隐藏浏览器上下的状态栏
4. 忽略某些浏览器识别成功之后会将号码或者邮箱转换成a标签
5. Windows Phone点击无阴影类似于css的-webkit-tap-highlight: transparent
6. 清除浏览器缓存手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
7. 为手持设备定制特殊样式HTML项 1. 调用系统功能
打电话给: 10086 发短信给: 10086 发邮件给：839626987@qq.comisQQ返回是否是手机QQ内置浏览器，而不是QQ浏览器
4. 监听页面可见性变化
- 方法1：
// 当前窗口得到焦点
window.onfocus = function () {}
// 当前窗口失去焦点
window.onblur = function () {}
- 方法2：
document.addEventListener('visibilitychange', function () {
var hidden = document.hidden;
if (hidden) {
// 当前窗口失去焦点
} else {
// 当前窗口得到焦点
}
});
页面最小化、切换标签、切换应用
5. Apple设备zepto/jquery事件委托bug$(document).on('click', '.btn', function () {
console.log(this)
})
.btn为div标签，不管是异步添加的还是同步添加的.div，在Iphone上都无法触发该事件，但是Android、PC却可以，上网找了一下资料，解决办法有两种：
- 给.btn加个css属性cursor: pointer;
- 换成a或者button标签;
var roller = {
handle(e) {
e.preventDefault()
},
lockRoll() {
document.addEventListener("touchmove", handle, false)
},
cureRoll() {
document.removeEventListener("touchmove", handle, false)
}
}
一般用于弹出蒙层(mask)之后禁止，消失就恢复
7. 监听屏幕旋转事件window.addEventListener('onorientationchange', callback, false);
function callback () {
let orientation = window.orientation;
if(orientation == 0 || orientation == 180) {
// 竖屏
} else {
// 横屏
}
}
8. 重力感应
window.addEventListener('deviceorientation', callback, false);
function callback (e) {
var data = e.accelerationIncludingGravity;
console.log(data) // 这里有你想要的数据
}
一个不错的库http://www.jq22.com/jquery-info178
9. 事件穿透点击穿透问题：点击蒙层(mask)上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件，解决办法:
- 只用touch
- 只用click
- touch延迟350ms再隐藏蒙层(mask)
- fastclick.js
- zepto-移动端的Jquery
- swiper-轮播图
- clipboard.js-复制剪贴板
- qrcode.js-动态生成二维码
