Html 禁用 div 缩放，但允许缩放页面（备用 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13886763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable zoom on a div, but allow zoom on the page (an alternate div)
提问by GJDesigns
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?
有没有办法禁用 div 或网站上的任何特定元素的缩放？例如，如果我希望页面可缩放，而不是 #Header div，有没有办法使一个可缩放，而另一个不可缩放？
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' />
采纳答案by Aleksej Komarov
You can't do that without clever hacks.
如果没有聪明的黑客，你就无法做到这一点。
However, you can (and should) use the following CSS to fix zoom issues on mobile devices:
但是，您可以（并且应该）使用以下 CSS 来修复移动设备上的缩放问题：
header {
position: fixed;
...
}
@media only screen and (max-width: 720px) {
header {
position: absolute;
}
}
This code enables position: absolutewhen display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.
此代码position: absolute在显示宽度小于或等于 720px 时启用，并且页眉成为页面的一部分，而不是固定在顶部。
回答by Dominic Cerisano
In shorter, you certainly can do that.
简而言之，你当然可以做到。
You can trap window resize events and resize your floating div according to the dpi change calculated from the various new window and inner width and height attributes.
您可以根据从各种新窗口和内部宽度和高度属性计算出的 dpi 变化来捕获窗口调整大小事件并调整浮动 div 的大小。
So, when you zoom in, you want to shrinkthe floating div so it retains the original dpi, and vice versa.
因此，当您放大时，您希望缩小浮动 div 以保留原始 dpi，反之亦然。
This would be an epic fiddle - revisit this answer soon, since I may have to do such a thing. Already noticing some cross-browser inconsistencies with dpi, so yeah, fun.
这将是一个史诗般的小提琴 - 尽快重新审视这个答案，因为我可能不得不做这样的事情。已经注意到一些跨浏览器与 dpi 的不一致，所以是的，很有趣。
回答by mkey
I don't think you can do that directly. One possible option would be to detect the zooming through js events and scale elements accordingly.
我不认为你可以直接做到这一点。一种可能的选择是通过 js 事件检测缩放并相应地缩放元素。
Another option would be to "break" the CTRL key to disable zooming on your website, but that's just a big no-no.
另一种选择是“打破” CTRL 键以禁用您网站的缩放功能，但这只是一个很大的禁忌。
回答by pratik
If you are using angular there is a way to give one id to your header div and then write the following code in controller:
如果您使用的是 angular，则有一种方法可以为标题 div 提供一个 id，然后在控制器中编写以下代码：
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
I used in my project and it worked well..
我在我的项目中使用过，效果很好..
