一直在做移动端的网页，遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容，这里总结一下，也是对自己的一个知识梳理
JavaScript
-
UC白屏问题
错误表现：网页在微信和QQ内置浏览器访问正常，但是UC和大部分的手机自带浏览器访问页面会出现白屏，打印调试后发现，JS代码一句都没有执行。
解决：这种问题是因为使用了浏览器不支持的语法导致的，第一种是ES6没有转换为ES5。但是很多人使用了Babel转义后依然会出现这种情况，这就是第二种错误：使用了浏览器不支持的Api。某些函数方法是不会被Babel转义的，但是浏览器依然不支持。例如Object.freeze()冻结函数，使用了这个方法后即使进行Babel转义，UC和自带浏览器中也会出现白屏。
// 特意去babel官网去测试了一下，只是比原代码多加了一个 'use strict'
Object.freeze({ a: 0 })
// =>
"use strict";
Object.freeze({ a: 0 });这样的 Api 应该有很多，如果项目中出现了这个错误，不知道错误具体出现在哪儿，那就只能用二分法慢慢排除了。
-
UC浏览器返回上一页不刷新页面
表现：这个属于浏览器的特殊行为了，特点是UC浏览器返回上一页时不会更新页面。
解决：
// 第一种方法，强制刷新页面，当从pageB返回到pageA时，刷新页面
//（pageA => pageB => pageA => upDated）
$(window).on('pageshow', function (evt) {
setTimeout(function () {
if (evt.persisted) {
location.reload(true)
}
}, 10)
})// 第二种方法，在跳转到新的页面前把页面回归到想要的状态
//（pageA => upDated=> pageB）
// 在pageA 跳转到pageB前执行
btn.onclick = function() {
setTimeout(function() {
upDated() // 更新待会返回时想要的页面的状态
}, 0)
location.href = "{{跳转的域名}}"
}-
移动端浏览器左右滑动导致的BUG
表现：现在的手机浏览器很多都自带左右滑动前进后退的，但是如果你有一个轮播图或其他一些触发touch事件的元素，有时就会和浏览器自带的行为有冲突。
解决： 在touchstart中加入e.preventDefault()可以阻止浏览器的自带行为。然后会发现click事件无法触发了，在移动端，浏览器认为执行了touchstart和touchend才算一次完整的点击，但是由于在touchstart中加入了e.preventDefault()导致点击事件不能触发，这时如果要出发click事件可以把e.preventDefault()放入touchmove事件中。就可以完美执行了。
但是在UC浏览器下，使用了e.preventDefault()后有时还会触发UC自带的行为，需要注意。。。再附一篇相关博文
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
CSS
-
IOS点击不触发事件回调函数
错误表现：在IOS中，点击非a标签的元素无法触发点击事件。
解决：这种情况出现在动态添加的Dom节点上，即使使用了事件代理，或者在Dom被添加后进行绑定都不会触发元素绑定的JS事件。解决方法是给Dom元素添加样式 cursor: pointer; 这样就可以正确触发事件了。
-
IOS下为元素添加overflow样式滑动变卡
错误表现：在IOS中，元素添加了overflow样式后，滑动惯性会被取消，导致滑动不顺畅。
解决：可以给元素添加-webkit-overflow-scrolling: touch;样式，解决一切滑动不顺畅问题，但是IOS下使用-webkit-overflow-scrolling: touch;会导致另外的Bug，position定位的元素如果和设置了overflow的元素是兄弟关系或父子关系，会导致定位元素也会随着一起滚动，需要注意。
-
系统版本过低导致flex布局失效
错误表现：移动设备的系统版本过低时，flex布局失效
解决：设置display: flex;样式的子元素，必须是块级元素，否则失效（必须设置display: block;）。还有一点要注意，flex-wrap低版本的系统是完全不支持的，可以用display: inline-block;替代。
原文链接：http://blog.csdn.net/qq_25243451/article/details/78811776
