前端开发 PC Web端如何禁止用户缩放页面

开发的页面不想让用户缩放页面,这样的页面可能涉及很多绝对相对定位。

页面缩放一般三种方式

  1. ctrl +鼠标滚轮
  2. ctrl + 键盘 "+"、"-"

第三种暂时没办法

前两者可以监测到,那就能禁止

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
    );
    document.addEventListener(
      'mousewheel',
      function (e) {
        e = e || window.event;
        // @ts-ignore
        if ((e.wheelDelta && event.ctrlKey) || e.detail) {
          event.preventDefault();
        }
      },
      {
        capture: false,
        passive: false
      }
    );

把这段代码贴在你页面加载完成的生命周期里,等待着奇迹发生吧

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PC端屏幕显示设置缩放比例改变时,会对页面的布局造成影响,特别是对于以像素为单位进行布局的网页。为了解决这个问题,前端可以采取以下措施: 1. 使用相对单位:在网页布局中,使用相对单位比如百分比(%),em或rem代替像素(px)作为元素的尺寸单位。相对单位可以根据屏幕缩放比例的改变,自动调整元素的尺寸,保持布局的一致性。 2. 弹性布局:使用弹性盒模型(flexbox)或网格布局(grid)可以实现灵活的布局。这些布局模型可以根据容器的尺寸自动调整子元素的宽度和高度,而不受屏幕缩放比例的影响。 3. 响应式设计:采用响应式设计的方法可以使网页自动适应不同屏幕大小和缩放比例的变化。通过使用CSS媒体查询和断点,可以根据屏幕尺寸的改变,自定义不同的样式和布局。 4. 使用像素密度查询(DPI Query):通过检测设备的像素密度,可以判断设备的缩放比例,并根据结果应用对应的样式和布局。 除了上述方法,还可以使用JavaScript来实时监测窗口大小的变化,并触发相应的布局调整。通过监听窗口resize事件,可以实现动态的缩放适应布局。 总结来说,为了解决PC端屏幕显示设置缩放比例对页面布局的影响,前端可以采用相对单位、弹性布局、响应式设计等方法,以及通过JavaScript监听窗口大小变化来动态调整布局。这些方法可以帮助网页在不同的屏幕显示设置下都能保持良好的布局和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值