【实战篇】移动端H5网页在ios滑动不流畅和禁止缩放问题
【摘要】 问题描述:移动端H5网页在ios滑动不流畅和禁止缩放问题 最近开发小程序,有一个富文本展示页面使用的是<webview>H5网页嵌入的,当你用 overflow-y:scroll 属性的时候,内容超出容器溢出滚动的效果很迟顿,特别是在IOS系统中,而且页面还会缩放。 解决方案:1、移动端H5网页禁止缩放问题解决方案修改meta标签即可控制页面缩放及是否缩放width - v...
问题描述:移动端H5网页在ios滑动不流畅和禁止缩放问题
最近开发小程序,有一个富文本展示页面使用的是<webview>H5网页嵌入的,当你用 overflow-y:
属性的时候,内容超出容器溢出滚动的效果很迟顿,特别是在IOS系统中,而且页面还会缩放。
解决方案:
1、移动端H5网页禁止缩放问题解决方案
修改meta标签即可控制页面缩放及是否缩放
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
target-densitydpi - 按照图片真实尺寸进行展示
2、移动端H5网页在ios滑动不流畅解决方案
1. -webkit-overflow-scrolling:控制元素在移动设备上是否使用滚动回弹效果;
2. auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止;
3. touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比;
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)