安卓H5页面无法滑动，而iPhone和网页端浏览器可以

最新推荐文章于 2023-02-28 19:39:06 发布

nian-hua

最新推荐文章于 2023-02-28 19:39:06 发布

阅读量897

点赞数

分类专栏：异常bug 文章标签： css html html5

本文链接：https://blog.csdn.net/jxsjbsjsjiendk/article/details/106115948

版权

异常bug 专栏收录该内容

1 篇文章

订阅专栏

是因为项目中html属性写了touch-action:none; 写成-ms-touch-action

-ms 代表ie浏览器私有属性
-moz代表firefox浏览器私有百属性
-webkit代表safari、chrome私有属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nian-hua

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

王二红

04-07

4937

vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解

小程序内嵌 H5 页面跳转回小程序：安卓正常，iOS偶尔无法跳转问题解决方案

11-27

664

通过优化跳转逻辑并尽量使用微信小程序原生支付功能，可以有效解决 iOS 跳转不稳定的问题。

参与评论您还未登录，请先登录后发表或查看评论

H5聊天工具页面手机键盘显示消失问题优化

qq_33932956的博客

09-26

944

如图，H5做一个类似微信的聊天页面，如何经常发现键盘的弹出会遮挡页面，或者键盘消失，页面留下白块，我的解决思路如下：键盘弹出的时候，把内容显示部分的dom高度改小，键盘消失，内容部分dom恢复初始值。这么做主要考虑是iphone手机，键盘弹出，整个dom就会被挤到屏幕上方之外，所以你的欢迎语什么的都看不到了。 1.全局变量保存高度 var Height= document.body...

移动端h5页面不能滑动，模拟器可以下滑，问题的解决办法

weixin_44450433的博客

03-10

4419

我是今年才接触html,现在画页面经常也用frontpage辅助，最近粘贴了个页面后，发现没办法再手机上滚动，所以记录一下，也顺便记录下自己的生活。昨天做了很多梦，从上海来这边一年了，诸多不顺，技术也是从后端到前端，因为小地方，后端基本用不上，基本都是短平快的h5，小程序，公众号，很少会想着构建统一的数据服务，什么数据中台就更扯淡了。话不多说，结果导向，好好加油！ 1、H5页面没有使用任何滚动...

安卓5版本h5页面滚动失效bug

风烟

05-09

1295

安卓5版本手机上的H5网页无法滚动。原来是我在vue生命周期mounted的时候执行了以下代码 document.body.addEventListener('touchmove', e => { e.preventDefault(); }); 执行这段代码导致的滚动失效，当时为什么这么写呢，有些忘了，以后这块代码想起来之后，要加上注释。安卓滚动问题一般需要先想到touch的问题。一点一点排查。定位原因。 ...

h5页面在安卓手机浏览器上不能上下移动的问题

fly_wugui的博客

05-07

6537

1、当在css中加入下面样式，会导致页面无法正常上下滑动 // css 文件 { touch-action: none; } 这行代码后，会导致页面无法正常上下滑动，解决办法：修改为默认值{ touch-action: auto; }或者删除改行样式原因： CSS属性 touch-action 值说明： auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进...

微信小程序在安卓不会左右滑动，在ios苹果会的解决方法

weixin_47183748的博客

10-17

2511

哈喽开发者，这是平时遇到问题的总结，如果对你有帮助，点个赞~ 问题小程序做完后在安卓机上不会左右滑动，在苹果机出现左右滑动的问题，以下提供了多种方法，可以逐个试试。问题分析据我了解，此问题有两种原因一是你某些模块的宽度超过了手机的宽度，溢出了，你们就会想到overflow裁剪了吧二是你设display：flex等盒模型的时候，设置了padding和margin等边距，它是默认会将边距添加到总宽度的，所以也就导致你的元素变宽了，这个问题安卓机没事，苹果就不兼容了。这里就需要一个属性 box-s

h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG

weixin_35809867的博客

05-26

3958

解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。这时候，你自信满满的将h5地址交给了APP工程师，做了一个WEBVIEW嵌套，然后就顺利交工了。测试组在一堆手机中测试APP，突然，在某个手机上打开，你的页...

H5端禁止蒙层底部页面跟随手势滚动

JUSTIN的博客

06-25

2673

(一) 前言说来真是搞笑，之前很多交互都是依赖UI库的modal实现，之前也遇到过类似天猫商品列表页面那种下拉筛选，也解决过相关手势问题，但是，后面一个同事再次问起这个问题，回头去总结下，发现之前通过选取dom并为背景和内容分别处理touchmove事件，但是这仅仅是对于h5的一个解决方案，所以总结常见在pc/h5上面分别的处理方案。 (二) PC处理方案打开蒙层时，给body添加样式： ov...

在vue中封装一个betterscroll组件，并解决ios、Android在微信页面上下拉出现滑动的问题

前端李小白的博客

03-31

3028

最近在开发微信公众号网页的时候，发现使用原生滚动的时候，ios在微信网页下，上拉，下拉都会出现一大片的空白，看起来极其的别扭，为了解决这一问题，找了许多参考资料，如下是解决方法。 1.首先在你需要禁止滑动的页面中添加如下代码 mounted（）{ document.body.addEventListener( 'touchmove', function (e)...

h5 android 滚动条卡顿,h5怎么解决移动端滑动卡顿的问题

weixin_30100299的博客

05-26

1402

h5 android 滚动条卡顿,h5页面滑动卡顿解决方法

weixin_35922444的博客

05-26

2880

解决方式：给滚动的元素加样式：-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹)如果值为auto，就是普通的滚动，手指离开就停止滚动，让人感觉有点卡顿如果设置为touch，在手指离开后还会滚一下，有回弹效果，看上去很流畅但是刚开始用的时候有个小bug，h5页面打包成app时，一开始写成了*{-we...

移动端软键盘弹起页面无法滚动问题

背着电脑走江湖的博客

11-25

969

【代码】移动端软键盘弹起页面无法滚动问题。

关于移动端h5页面不能滑动问题的解决办法

tao__f的博客

09-15

8404

页面不能滑动无非就是css和js两个方面的问题有的人说如果我写很多个p标签不写任何样式看能不能滑动，如果能滑动说明是样式的原因，要是也不能滑动那就应该是js的原因，是有一定的道理的，但是先别忘了看一下你的html或body是不是加了height：100%；overflow：hidden； 1.下面分先说css的问题，主要排查overflow：hidden； // 阻止弹框滚动穿透 e.preventDefault(); e.stopPropagation()不起作用; useEffect(() =

移动端安卓系统键盘弹起再收起页面无法滚动问题

o_o6666的博客

11-12

3213

首先，要在安卓系统出现这种情况经过我反复测试需要满足两种情况，才会触发： 1、最外层样式高度使用100vh； 2、页面内容高度没有撑满一屏；解决方式：通过监听键盘弹起、收缩来更改高度值 html <div class="wrapper"> <div class="prob_sugg_detail contain_main" ref="main"> <van-tabs v-model="active" scrollspy

移动端安卓系统键盘弹起再收起vue页面无法滚动,页面卡死问题

weixin_44933443的博客

07-28

1264

移动端安卓键盘弹起再收起vue页面卡死无法滑动问题解决

解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开

chenphoenix的博客

06-10

706

//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => { if (document.activeElement.tagName == 'INPUT') { //延迟出现是因为有些 Android 手机键盘出现的比较慢 window.setTimeout(() => { document.activeElement.scr

HTML5移动端开发页面无法上下滑动问题

m0_52238102的博客

02-28

2038

最近开发一个移动端外卖应用，在写商品列表时发现对于的商品列表不显示，而且往下划不动。从网上收集资料后，以为是设置viewport导致的，最终发现设置无果，看到一篇文章解我心中疑惑。问题所在：设置了overflow:hidden。

touch-action属性

05-30

523

最近在做微信项目的时候遇到一个奇怪的问题：常购清单的商品多了以后往上滑没有任何反应，不能滑动。但商城首页又可以往上滑。而且ios没有这个问题，安卓才有这个问题。起初我以为是因为这2个页面调用接口循环加载出商品的方法不同导致的。商城首页的商品部分是用laytpl模板写的；常购清单商品部分是拼的字符串。结果就是不管是模板写的还是拼的字符串，安卓都不能往上滑动，ios可以。我以...