移动常见疑难问题
平时的开发过程中，经常会遇到一些疑难杂症，在这里记录一下常用的解决方案。
UI小姐姐要求的0.5px线
原因：不同手机的兼容不一样，尤其安卓
IOS的Safari表现是比较好的，safari是可以支持浮点型的属性的。因此在IOS的系统中，0.5px是可以实现的。但在Andriod手机下，有些Andriod系统的浏览器，会对浮点型数据执行四舍五入的情况，即给元素设置border-width:0.5px，那么其表现与你设置border-width:1px;是相同的。
方案一：放大2倍再缩小
// 放大再缩小
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #565D66;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}方案二：修改透明度为0.5，线条四周看起来会淡很多，或许能骗过小姐姐。
点击穿透问题
原因：移动浏览器提供一个特殊的功能：双击（double tap）放大。导致了著名300ms的时间延迟问题。click是在touch系列事件发生后大约300ms才触发的，混用touch和click就会导致点透问题。
方案一：300毫秒之后再消失弹窗，做个动画消失效果过渡。
setTimeout(() => {
dialog.close();
}, 300);方案二：touchStart后300ms都被一个透明不可见的div去覆盖，第二个click是点不到对应的a。
// html
<body>
<div id="preventClick"></div>
</body>
// js
function onDeviceReady() {
setTimeout(function(){ $('#preventClick').hide(); }, 300);
}方案三：使用fastClick，个人认为最好最简单的方法
方案四：页面全部点击事件换成click，这样会感觉慢慢慢
方案五：页面全部事件换成touch事件，但需要注意的是a标签的href也是click。
Android 浏览器文本垂直居中
原因：在开发中，常使用 line-height 属性来实现文本的垂直居中，但是在安卓浏览器渲染中有一个常见的兼容问题，就是对于小于12px的字体，尤其是奇数的字体大小，使用 line-height 属性进行垂直居中的时候，渲染出来的效果会偏上一些。
方案一：放大两倍，再用 scale 进行缩小一倍
div {
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 20px;
transform: scale(0.5);
transform-origin: 0%, 0%;
}方案二：使用table布局
// html
// 需要在外面套一层
<div class="wrap">
<span class="content">aaa</span>
</div>
// css
.wrap {
display: table;
}
.content {
font-size: 10px;
display:table-cell;
vertical-align: center;
}输入框 focus 以后，软键盘遮挡输入框的情况
尝试 input 元素的 scrollIntoView 进行修复。
// 安卓手机，键盘挡住输入框
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('click', function () {
try{
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
var inputType = document.activeElement.type;
if(inputType == 'checkbox') return;
setTimeout(function() {
document.activeElement.scrollIntoView(true);
}, 0)
}
}catch(e){
console.log('安卓兼容键盘挡住输入框报错', e);
}
})
}fixed+Input
原因：ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位。在某些安卓机下，键盘弹起会引起窗口高度（html标签的高度）变小，而fixed定位是相对于html根元素的，所以会被顶上来了。
方案一：弹起软键盘的时候，把fixed定位的元素改成block，回归文档流，当输入框失去焦点时，又变成fixed定位，还要把滚动条距离记录下。
var screenHeight = document.body.offsetHeight; // 获取视图原始高度
window.onresize = function(){
if (document.body.offsetHeight < screenHeight) {
document.getElementsByTagName("nav")[0].style.display = "none";
}else{
document.getElementsByTagName("nav")[0].style.display = "block";
}
};方案二：iscroll能较好地处理fixed滚动的问题。
禁止蒙层底下页面跟随滚动
原因：弹窗是常见的交互方式，而蒙层是弹窗必不可少的元素。但是，在蒙层元素过长滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动。这是因为触发了冒泡，使得父元素跟着滚动。
方案：很简单，防止出现冒泡即可。设置滚动容器和弹窗为同级节点。
// css
#root{
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
相关推荐
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->