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

思路：禁止浏览器通过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>

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

html页面不能放大缩小,互联网常识：html怎么禁止页面放大缩小
在html中,可以利用meta标签,设置content属性的值为"width=device-width, initial-scale=1.0, maximum-scale=1.0, user ...
js禁止页面放大缩小
转载:https://www.cnblogs.com/dearxinli/p/7645922.html 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewpo ...
Vue绑定Class样式
Vue绑定Class样式 vue有一个控制样式的小技巧,适用于单个或多个元素需要多种风格样式的切换. 我们可以先准备一个基本样式,以及之后需要切换的多种样式类型 <style>.basic ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
html禁止手机页面放大缩小
html禁止手机页面放大缩小 <meta name="viewport" content="width=device-width,minimum-scale=1.0 ...
vue绑定class样式的方式
由于不同的业务逻辑,根据不同逻辑,有不同的class样式,因此绑定class样式有以下几种方式: 绑定class样式:字符串写法绑定class样式:数组写法绑定class样式:对象写法 // 绑定 ...
android 百度地图禁止双击放大缩小,leaflet-div上禁止地图的拖动，放大缩小双击事件...
1. 先把dom的div对象获取到,可用document.getEleementById("divId"); //获取当前的this对象 const that = this; // ...
vue设置海报二维码任意移动+放大缩小
<template><div class="content" v-if="hasPriv">< ...
android 禁止屏幕放大缩小,禁止APP内Webview页面跟随系统缩放字号
最近开始做适配移动端的网页,通过APP内部的Webview展示.为了在不同分辨率的设备上都能按相同的布局来展示,使用了rem布局的页面自适应方式: (function (doc, win) { var ...

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

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

最新文章

热门文章