PC及移动端禁止用户缩放页面的实现方式

对于移动端，我们可以直接这样限制：

在PC端上：

1、禁止用户在页面上使用ctrl+鼠标滚轮和ctrl+“+”“-”进行页面缩放：

可以在index.html中增加如下代码：

 <script>document.addEventListener('mousewheel', function (e) {e = e || window.event;if ((e.wheelDelta && event.ctrlKey) || e.detail) {event.preventDefault();}}, {capture: false,passive: false});document.addEventListener('keydown', function (event) {if ((event.ctrlKey === true || event.metaKey === true)&& (event.keyCode === 61 || event.keyCode === 107|| event.keyCode === 173 || event.keyCode === 109|| event.keyCode === 187 || event.keyCode === 189)) {event.preventDefault();}}, false);</script>

2、在vue项目中，还原用户的缩放操作（对用户在页面上修改浏览器样式也生效）

在App.vue中（最外层父页面）

mounted () {this.keepRatio()window.addEventListener('resize', () => {this.keepRatio()});},

在methods中，加入这样一个方法keepRatio：

methods: {keepRatio () {var ratio = 0;  // 定义一个缩放比例var screen = window.screen;  // 获取窗口对象var ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;  // 像素大小的比例}else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;  // 外部比例/内部比例：缩放比例}if (ratio) {ratio = Math.round(ratio * 100);}this.ratio = (ratio / 100).toFixed(2);document.body.style.zoom = 1 / this.ratio;  // 窗口视图除以缩放比例：即缩放还原}}

PC及移动端禁止用户缩放页面的实现方式相关推荐

移动端禁止用户缩放页面大小尺寸
通常我们关闭移动端页面缩放是通过标签: <meta name="viewport" content="width=375,initial-scale=1,user- ...
ios10中禁止用户缩放页面
ios10 通过js进行阻止用户缩放 window.οnlοad=function () { document.addEventListener('touchstart',function (even ...
ios10中禁止Safari浏览器用户缩放页面
在ios10前我们能通过设置meta来禁止用户缩放页面: <meta content="width=device-width, initial-scale=1.0, maximum-s ...
html如何禁止用户缩放,html如何禁止页面缩放
在html中,可以使用user-scalabel属性设置禁止页面缩放,只需要在mate元素中添加"user-scalabel=0"样式即可.user-scalable属性控制用户是 ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮浏 ...
html5禁止浏览器缩放网页大小 (实用）
延伸阅读:meta标签viewport详解 html5默认允许用户缩放页面,如果需要禁止缩放,我们需要将user-scalabel=0设置下,具体代码如下: <meta name="v ...
[html] 移动端如何禁止用户手动缩放页面？
[html] 移动端如何禁止用户手动缩放页面? <meta name="viewport" content="width=device-width,initial- ...

PC及移动端禁止用户缩放页面的实现方式

1、禁止用户在页面上使用ctrl+鼠标滚轮和ctrl+“+”“-”进行页面缩放：

2、在vue项目中，还原用户的缩放操作（对用户在页面上修改浏览器样式也生效）

PC及移动端禁止用户缩放页面的实现方式相关推荐

最新文章

热门文章