H5移动端开发问题及解决方法

一、iOS 滑动不流畅

上下滑动页面时会产生卡顿，手指离开页面后，页面立即停止运动。

解决方法：

在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto：

-webkit-overflow-scrolling:touch;/* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling:auto;/* 当手指从触摸屏上移开，滚动会立即停止 */

二、iOS上拉或者下拉页面时出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域；当手指按住屏幕上拉，底部多出一块白色区域。原因是在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方法：

通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动：

document.body.addEventListener('touchmove',function(e){

    if(e._isScroller) return;

    e.preventDefault();

}, {

    passive:false

})

三、软键盘将页面顶起来，input失焦后页面没有回弹

点击input框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，页面未回落。

解决方法：

解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：

focus() {

    this.scrollTop =document.scrollingElement.scrollTop;

},

blur() {

    document.scrollingElement.scrollTo(0,this.scrollTop);

}

四、调用系统的功能

打电话给: 10086

发短信给: 10086

发邮件给：[email protected]

五、打开原生应用

打开微信

打开支付宝

打开支付宝的扫一扫功能

打开支付宝的蚂蚁森林

这种方式叫做URL Scheme，是一种协议，一般用来访问APP或者APP中的某个功能/页面（如唤醒APP后打开指定页面或者使用某些功能）。

注：

1.唤醒APP的条件是你的手机已经安装了该APP；

2.某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）。

六、忽略自动识别为号码或邮箱

1. 忽略浏览器自动识别数字为电话号码

2.忽略浏览器自动识别邮箱账号

当页面上的内容包含了手机号/邮箱等，会自动转换成可点击的链接，比如

13192733603

，有些浏览器会识别为手机号，并且可以点击拨号。

七、禁止长按

1.禁止长按图片保存

img {

-webkit-touch-callout:none;

pointer-events:none; // 像微信浏览器还是无法禁止，加上这行样式即可

}

2.禁止长按选择文字

* {

  -webkit-touch-callout:none; /*系统默认菜单被禁用*/

  -webkit-user-select:none; /*webkit浏览器*/

  -khtml-user-select:none; /*早期浏览器*/

  -moz-user-select:none; /*火狐*/

  -ms-user-select:none; /*IE10*/

  user-select:none;

}

但是这样写的话在ios上会出现输入框无法输入的问题，所以要加上以下代码

input,

textarea {

  -webkit-user-select:text;

}

3.禁止长按呼出菜单

div {

-webkit-touch-callout:none;

}

八、屏幕旋转为横屏时，字体大小会变

* {

  -webkit-text-size-adjust:100%;

}

文章参考来源：公众号全栈前端精选以及前端宇宙情报局