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

趁着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);
}
posted @ 2018-12-30 12:24  wonyun  阅读(1376)  评论(1编辑  收藏  举报