html 怎么禁止局部缩放包括文字,图片,div

问题描述：

html 怎么禁止鼠标滚轮的局部缩放包括文字,图片,div,如,指定页面一个div,让其子组件,孙子组件都不缩放

答

思路大概是监听页面缩放比例，然后动态的改变节点的大小，来保存不论缩小或者放大 你的节点保存相对不变



   <script>
            window.addEventListener('mousewheel', function (event) {
                console.log('执行啦')
                console.log(event)
                console.log(detectZoom())
                document.querySelector('#viewDiv').style.width=200/detectZoom()*100+'px'
                document.querySelector('#viewDiv').style.height=200/detectZoom()*100+'px'
                console.log(document.querySelector('#viewDiv').style.width)
                    }, { passive: false });
    
                //获取当前页面的缩放值
                function detectZoom() {
                        var ratio = 0,
                            screen = window.screen,
                            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);
                        }
                        return ratio;
                    }

    </script>

```

答

js禁止页面放大缩小_carcarrot的博客-CSDN博客_禁止页面缩放转载：https://www.cnblogs.com/dearxinli/p/7645922.html众所周知：移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可，但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：windows：ctrl + +/- ctrl + 滚轮浏览器菜单...

https://blog.csdn.net/carcarrot/article/details/100573140

答

在页面head标签对中加上下面代码即可

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

html 怎么禁止局部缩放包括文字,图片,div

相关推荐