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%;

}



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

你可能感兴趣的:(H5移动端开发问题及解决方法)