停用div上的缩放，但允许在网页上缩放（替代div） [英] Disable zoom on a div, but allow zoom on the page (an alternate div)

问题描述

有没有办法禁用缩放div或网站上的任何特定元素？例如，如果我想让页面可缩放，但不是#Header div，是否有一种方法使一个可缩放，而另一个不可缩放？

基本上，当您在移动设备上放大时，它也会缩放标题，但我希望标题始终处于固定大小（不可缩放）。

您可以使用此代码禁用整体缩放：

 < meta content ='width = device-width;初始尺度= 1.0; maximum-scale = 1.0; user-scalable = 0;'name ='viewport'/> 
  

解决方案

但是，您可以使用条件CSS修复移动设备上的缩放问题：

下面是一个示例代码：

  header {
 position：fixed; 
 ... 
} 
 
 @media only screen and（max-width：720px）{
 header {position：absolute; } 
} 
  

此代码启用 position：absolute 当显示宽度小于或等于720px，并且标题成为页面的一部分，而不是固定在上面。

简单， 。

Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable?

Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable).

I know that you can use this code to disable zooming overall:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

解决方案

In short: You can't do that.

However, you can use conditional CSS to fix zoom issues on mobile devices:

Here is an example code:

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
     header { position: absolute; }
}

This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.

Simple, and does the job.

这篇关于停用div上的缩放，但允许在网页上缩放（替代div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！