移动端开发常见问题汇总(未完待续)

趁着2018年的最后一天还没有过去，就写篇文章吧，主要是来简单总结下移动端开发中存在的问题吧；当然移动端的问题肯定不止下面的问题，未完待续。。。

禁止页面缩放meta标签兼容性问题

移动端h5展示一般通过设置meta的viewport来规范页面的展示效果，常使用如下配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0 user-scalable=no">

上面的作用之一就是禁止用户缩放，大部分设备下是没有问题的，但是：

在IOS >= 10 系统的safari下，user-scalable=no已不起作用

既然缩放有兼容性问题，那么可以通过js来完成禁止缩放，比如下面：

// 禁用双指缩放
document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

// 禁止双击缩放
var lastTouch = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouch <= 300) {
    event.preventDefault();
  }
  lastTouch = now;
}, false);

ios input内阴影的问题

input输入框在ios下会默认有顶部内阴影的问题，在Android平台下没有这个问题，ios下的内阴影如下图所示：

解决办法为input添加如下样式即可：

input[type="text"] {
  -webkit-appearance: none;
}

弹框滚动穿透的问题

所谓弹框滚动穿透问题，是指移动端弹出fixed弹窗后，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”。

具体可以参考这篇文章移动端滚动穿透问题，本人项目采用跟文章中的终极解决方案类似方式解决。