解决H5页面无法滚动

问题一：

在苹果手机可以，但安卓手机不可以。

H5页面没有使用任何滚动插件，比如： iscroll.min.js 或者 Better Scroll。

这里是因为：

* {touch-action: none;
}

这段代码，会导致安卓手机H5页面无法滚动，而苹果手机可以。使用 iscroll.min.js 或者 Better Scroll 也没用。

将这段代码去掉即可。

其他的样式的设置：

html {font-size: 100px;
}html, body {width: 100%; /*-- height:100%; 不用写，如果写了，表示只用这一屏 --*/overflow-x: hidden;
}/*-- 最外层边框, 宽度用js去控制。超过640px时，让它宽度固定在640px --*/
#main {margin: 0 auto;max-width: 6.4rem;
}

HTML页面：

<!-- 中间区域 -->
<div id="main"><!-- 轮播图 --><section class="swiper-container"></section><!-- NAV --><section class="nav clearfix"></section><!-- PRODUCT --><section class="product"></section></div>
<!-- 中间区域 -->

解决H5页面无法滚动相关推荐

一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
h5页面弹窗滚动穿透的思考
可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <div class="mas ...
Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题
H5适配一直是一个头疼的问题,基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , hei ...
Vue自定义指令—解决H5页面不同尺寸屏幕的适配问题
基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , height:1108px(可使用该方 ...
html兼容不同屏幕代码,rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题...
实例代码: 废土坱行 * { margin: 0; padding: 0; } .downloadBtn { width: 12rem; height: 3.6rem; background: red ...
解决h5页面 ios出现果冻效果
在移动端 ios出现了果冻效果,导致底部的tab会遮盖住内容,不能完全滑上去,对要上滑的div设置padding 代替margin即可
解决H5页面开发时iPhoneX手机底部和侧面白边问题。
//在meta viewport标签里添加如下属性:viewport-fit=cover;//例: <meta name="viewport" content="w ...
rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题
实例代码: <!DOCTYPE html> <html> <head><meta charset="utf-8" /><met ...
uniapp H5页面嵌入微信小程序 ios 下 video组件播放视频设置 border-radius overflow:hidden 不生效
在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface- ...

解决H5页面无法滚动

解决H5页面无法滚动相关推荐

最新文章

热门文章