1、click事件，a href无效在APP中无效：
场景：H5中绑定了click事件进行页面跳转，微信浏览器，手机内置浏览器测试没问题。内嵌到某APP中，点击事件无效，通过a标签href跳转也无效（IOS无效，安卓有效）
解决方法：
将click事件换成touchend事件进行跳转页面。
2、swipe组件，上滑翻页，在移动端真机环境中有闪白屏情况
场景：做一个活动H5页面，有上滑翻页效果。用到了swipe组件，在微信开发者平台中测试没问题。到真机上，一滑屏翻到下一页，就有闪屏效果，出现频率很高。
解决方法：
.swipe{
height: 100vh;
transform:translate3d(0,0,0); // 设置此属性
overflow:hidden;
}
.swipe-item {
transform:translate3d(0,0,0);
}
3、手机号码、邮箱的识别
场景：在移动端，H5页面的数字常被识别和处理成可拨打的电话，符合邮箱格式的识别为邮箱。
借助meta标签关闭识别：
<meta name="format-detection" content="telphone=no;email=no">
开启电话号码识别：
<a href="tel:1234">1234</a>
开启邮箱识别：
<a mailto:[email protected]>[email protected]</a>
4、IOS，安卓软键盘弹起差异
IOS: 当input输入框在页面中的位置比软键盘高度高时，页面不会滚动。否则软键盘弹起，页面被顶上去，出现滚动条~
5、IOS 微信浏览器 底部返回条
在微信公众号H5页面开发中，打开H5页面，IOS下方会有返回键导航栏(安卓中无底部返回条)，该导航栏占用一定的页面高度，导致页面高度缩小。
对于必须一屏展现所有内容的页面来说，注意页面底部元素是否显示完整~
IOS（iphone6）设计尺寸：
1、界面尺寸大小是：750x1334px。
2、状态栏(status bar)：就是电量条，其高度为：40px;
3、导航栏(navigation)：就是顶部条，其高度为：88px;
4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px;
5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px
6、IOS input拍照上传会自动旋转90度
IOS13.4版本 版本之前，上传后的图片会自动选择90度，所以需要前端手动再调回90度。若引用的是第三方上传组件，可能第三方已经处理了此类问题。
但13.4及以上版本IOS已经解决了此类问题，前端不需要再做处理了。
遇到拍照上传问题，一定要在不同机型中加以验证！！
7、IOS在微信公众号中返回按钮点击时，只是返回的之前页面的快照（静态页面），之前页面没有重新渲染。
- Android中微信公众号不提供回退键,而是监听手机自带的回退按钮, 回退回前一个页面时 页面会被强制刷新;
- IOS中微信公众号提供了默认的回退键, 但是在回退时,页面不会刷新,设置页面中的Meta缓存标签也没有用;
原因：Page Cache/Back-Forward Cache
解决方法：（亲测有效）
// onpageshow 事件在每次加载页面时触发
if(window.browser.versions.ios) {
window.addEventListener('pageshow', function (event) {
alert('pageshow');
//event.persisted属性为true时，表示当前文档是从往返缓存中获取
if(event.persisted) location.reload();
});
}
8、安卓下微信公众号菜单配置的H5页面，JS SDK验签失败（vue history路由）
详情参考：vue spa history模式 jssdk注入 invalid signature解决
未完待续！！