求教网页如何阻止用户对整个页面进行缩放

2019-09-21 12:56:39 +08:00
 shadowwalker2644

Meta 里设置 viewport 为 user-scalable=no 已经失效。谁能实现个 demo,在 Safari 和 Chrome 完美阻止缩放就好。需求背景是要求网页移动端里 PWA 运行时不能被用户缩放,防误触,也是为了让体验贴近原生 app。

2816 次点击
所在节点    问与答
15 条回复
shadowwalker2644
2019-09-21 12:59:05 +08:00
目前网上还没找到可行的方案,实在不行打算研究 js 监听事件来阻断缩放了
wolfan
2019-09-21 13:30:20 +08:00
lz 有办法让 coloros ( o/v 系手机)正常使用 PWA 么,coloros 好像是禁自动添加图标到桌面,郁闷(╥﹏╥)
luob
2019-09-21 13:39:42 +08:00
user-scalable 什么时候失效的,为什么不能用?
tanranran
2019-09-21 13:42:35 +08:00
1、禁用 control++
2、检测到有缩放,提示用户影响体验
rabbbit
2019-09-21 13:45:28 +08:00
minimum-scale=1,maximum-scale=1,user-scalable=no
Magentaize
2019-09-21 14:16:41 +08:00
是否能够缩放这取决于浏览器,浏览器可以用更大分辨率进行渲染而不是对网页重排
cutlove
2019-09-21 14:23:48 +08:00
@rabbbit safari 早就不认了
honeycomb
2019-09-21 15:17:26 +08:00
@shadowwalker2644 用户大不了进一步强行打断你的 js 监听。

怎么可以做这样的事?
temporary
2019-09-21 15:46:45 +08:00
样式的单位全用 vh vw 缩放就没影响了
temporary
2019-09-21 16:00:23 +08:00
@temporary #9 刚试了下 chrome 有效 safari 无效 😓
shadowwalker2644
2019-09-21 23:14:59 +08:00
@honeycomb 比如谷歌地图网页版就有这样的需求啊,两指捏合手势的时候,只缩放地图,不能缩放其他 UI
shadowwalker2644
2019-09-21 23:16:17 +08:00
@wolfan Chrome 浏览器也不行吗
shadowwalker2644
2019-09-21 23:17:14 +08:00
@Magentaize 以前浏览器会尊重页面的配置的,现在不行了
shadowwalker2644
2019-09-21 23:20:12 +08:00
感兴趣的朋友可以自己简单实现试一下就知道了,实践出真知。
wolfan
2019-09-22 09:24:45 +08:00
@shadowwalker2644 你觉得的用户会再装个 chrome 么?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/602801

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX