通过Vue绑定zoom样式值实现禁止页面放大缩小

最新推荐文章于 2026-06-21 10:01:27 发布

原创最新推荐文章于 2026-06-21 10:01:27 发布 · 2.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#禁止放大缩小页面

Javascript 同时被 2 个专栏收录

65 篇文章

订阅专栏

HTML

32 篇文章

订阅专栏

本文介绍了一种通过监听窗口的onresize事件并调整页面元素的zoom属性来阻止用户使用Ctrl+和Ctrl-进行页面缩放的方法。这种方法适用于需要保持固定布局设计的网页。

思路：禁止浏览器通过CTRL+与CTRL-放大与缩小页面比例，我们可以通过当页面放大（会触发window.onresize事件）时控制样式属性zoom按相应比例缩小（同理缩小窗体时zoom放大）来实现。

以下是示例代码：

…………

</div>

var opt = {
i18n:$i18n,
data: function () {
return {loading: false, zoom:100, };
},

mounted: function() {
var pThis = this;

       this.$nextTick(function() {
       pThis.loadData();;
       });

//定时刷新数据：

clearInterval(this.timer);

this.timer=setInterval(()=>{pThis.loadData();}, 60000);

           // document.body.clientHeight document.body.clientWidth window.innerWidth window.innerHeight
           //pThis.zoom = 100*document.body.clientHeight/1200,
           pThis.zoom = 100 * window.innerHeight / 853; //853为设计页面时根据相应设置的适当分辨率高度值而定
       //pThis.zoom = 100*document.body.clientWidth/1920,
           window.onresize = () => {
               return (() => {
               //pThis.zoom = 100*document.body.clientHeight/1200;
               pThis.zoom = 100 * window.innerHeight / 853; //853为设计页面时根据相应设置的适当分辨率高度值而定
                   //pThis.zoom = 100*document.body.clientWidth/1920;
               })()
           };

       watch:{
           zoom: function (val, oldVal) {
               console.log('new: %s, old: %s', val, oldVal)
               this.zoom=val;
           },

},
methods: {

loadData:function(){

…………

}

};

new JVue(opt).$mount('#app');

</script>