乐趣区

移动常见疑难问题

平时的开发过程中,经常会遇到一些疑难杂症,在这里记录一下常用的解决方案。

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;
} 


退出移动版