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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1920 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

缩放

阻止

pwa

viewport

15 条回复 • 2019-09-22 09:24:45 +08:00

shadowwalker2644

2019-09-21 12:59:05 +08:00 via Android

目前网上还没找到可行的方案，实在不行打算研究 js 监听事件来阻断缩放了

wolfan

2019-09-21 13:30:20 +08:00 via Android

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 via iPhone

是否能够缩放这取决于浏览器，浏览器可以用更大分辨率进行渲染而不是对网页重排

cutlove

2019-09-21 14:23:48 +08:00

@rabbbit safari 早就不认了

honeycomb

2019-09-21 15:17:26 +08:00 via Android

@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 via Android

@honeycomb 比如谷歌地图网页版就有这样的需求啊，两指捏合手势的时候，只缩放地图，不能缩放其他 UI

shadowwalker2644

2019-09-21 23:16:17 +08:00 via Android

@wolfan Chrome 浏览器也不行吗

shadowwalker2644

2019-09-21 23:17:14 +08:00 via Android

@Magentaize 以前浏览器会尊重页面的配置的，现在不行了

shadowwalker2644

2019-09-21 23:20:12 +08:00 via Android

感兴趣的朋友可以自己简单实现试一下就知道了，实践出真知。

wolfan

2019-09-22 09:24:45 +08:00

@shadowwalker2644 你觉得的用户会再装个 chrome 么？