一、移动端禁止缩放
移动端在禁止缩放上比较简单,添加meta标签即可
<meta name="viewport"
content="
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
- width // 设置 viewport 的宽度,正整数/字符串 device-width
- height // 设置 viewport 的高度,正整数/字符串 device-height
- initial-scale // 设置设备宽度与 viewport大小之间的缩放比例,0.0-10.0之间的正数
- maximum-scale // 设置最大缩放系数,0.0-10.0之间的正数
- minimum-scale // 设置最小缩放系数,0.0-10.0之间的正数
- user-scalable // 如果设置为 no 用户将不能缩放网页,默认为 yes,yes / no
二、PC(web)端禁止浏览器缩放
S(情景)
当某些页面有了特定的布局后,开发者不希望用户通过浏览器对其进行缩放(会导致布局、排版问题)
T(任务)
我希望通过Js的方式禁止用户对浏览器进行缩放,(如果用户是通过系统设置的网页缩放,也应进行提示)
A(我做了什么)
- 查询了许多文章,大部分思路都集中在这篇文章内stackoverflow-传送门