css取消双击放大缩小

有时候我们会发现使用手机或者电脑的时候,双击屏幕会产生放大缩小的效果,这可能会干扰我们的用户体验。那么该怎么取消这个效果呢?

    /**
    * 禁止双击放大缩小的效果
    */
    html {
      touch-action: pan-x pan-y; 
    }

css取消双击放大缩小

我们可以通过添加touch-action属性来取消双击放大缩小的效果。这个属性可以用于指定手势事件的认行为,pan-x表示水平方向上的滑动需要响应,pan-y表示垂直方向上的滑动需要响应。这样设置后,双击屏幕就不会执行放大缩小的效果了。

另外,我们也可以通过Meta标签来取消双击放大缩小的效果

    
    
    
    ...
    
    

Meta标签里设置viewport属性,将user-scalable属性设置为no,也可以取消双击放大缩小的效果

以上是取消双击放大缩小效果的两种方法,可以根据自己的需要选择使用哪种方法

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效