禁用浏览器的缩放功能(js)

一、移动端禁止缩放

移动端在禁止缩放上比较简单,添加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(我做了什么)

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余光、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值