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

趁着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弹窗后，在弹窗上滑动会致使下层的页面跟着滚动，这个叫 “滚动穿透”。

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

图片上传本地预览图片旋转问题

在实现图片上传的功能时，由于如今手机照片动不动就上兆的大小可能致使上传比较慢，因此前端使用FileReader来快速预览本地上传的图片；可是最近遇到一个问题，客户使用上传图片预览时，图片出现了不一样程度的旋转，相似以下右图所示出现了90度的旋转。

这是什么状况，经过查阅相关资料发现这跟图片的Exif信息有关。Exif 的全称是 Exchangeable image file format，的确是用于保存照片的一些元数据信息，如照片的拍摄设备，拍摄时间，是否使用闪光灯等。其中有一项就是 Orientation (rotation)，很明显应该就是它了。

因此，想要获取图片的旋转角度，就须要获取图片Exif元数据信息；正好有一个exif-js的npm包，能够获取这些信息。获取Orientation信息后就能够对图片进行旋转了。例如：

上面代码在图片支持exif信息的状况下能够解决，可是对于一些图片不支持exif的状况，这篇文章 笔记：使用 JavaScript 读取 JPEG 文件 EXIF 信息中的 Orientation 值提供了比较详细的解决方案；其中有一个比较hack的方法，即在 html 中建立一个 iframe，再从中引用这张 img，图片会以正确的方向显示

参考

• EXIF 方向参数 Orientation
• 笔记：使用 JavaScript 读取 JPEG 文件 EXIF 信息中的 Orientation 值