移动端开发常见问题汇总(未完待续)
移动端开发常见问题汇总(未完待续)
趁着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，图片会以正确的方向显示
参考
H5 ios input弹出的键盘收起后页面留白问题
部分ios机型在h5页面的input输入框吊起的键盘收起后，弹起的键盘占据的页面部分会留白，解决方案在失去焦点时重置滚动位置：
function onInpuBlur() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
}
