javascript 当用户在页面上放大和缩小时，如何保持 <div> 的大小不变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6117349/
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
How to keep a <div> constant in size as the user zooms in and out on the page?
提问by Pete Wilson
Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.
是否有一种 html/css/javascipt 方法可以在用户放大和缩小页面时将 <div> 保持在恒定大小？也就是说，使用 control-plus 增加文本大小，使用 control-minus 减少它。
EDIT:The kicker, I guess, is that I want the contentof the <div> to stay the same size, too.
编辑：我猜最重要的是我希望<div>的内容也保持相同的大小。
Thanks!
谢谢！
EDIT:My goal was (and is) to keep an AdSense <div> from expanding so much as to obscure a lot of the real content on the page. But come to find out (thank you @thirtydot) there's really no good way to do this. The answer, for me (thank you @Neal!): give the <div> overflow:scroll so as to sacrifice its content rather than the content I'm trying to show.
编辑：我的目标是（并且是）防止 AdSense <div> 扩展到掩盖页面上的许多真实内容。但是来找出（谢谢@thirtydot）确实没有什么好的方法可以做到这一点。答案，对我来说（谢谢@Neal！）：给 <div> overflow:scroll 以牺牲其内容而不是我试图展示的内容。
采纳答案by thirtydot
There is no good way (read: reliable) to do this. Sorry.
没有好的方法（阅读：可靠）可以做到这一点。对不起。
What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):
您所要求的基本上归结为检测浏览器的缩放级别，这里有一个很好的答案（确认这有多困难）：
As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:
如该答案所述，有一种“有点”跨浏览器的疯狂方式涉及使用 Flash，但也有缺点：
- It uses Flash.
- It's not reliable if the user loads your pagealready zoomed in.
- It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.
- 它使用闪存。
- 如果用户加载您的页面已经放大，这是不可靠的。
- 它使用闪存。是的，这太糟糕了，我说了两次。想想所有那些 iPhone/iPad。
Anyway, it's here:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/
无论如何，它在这里：http:
//blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/
回答by Naftali aka Neal
I am not sure what you mean, just use css:
我不确定您的意思，只需使用 css：
div#id {
width: 100px; /*or some other #*/
height: 100px; /*or some other #*/
}
html:
html：
<div id="id">some content</div>
回答by Hemanth Malla
To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :
要使 div 大小不变缩放（但不是其中的内容），请执行以下操作：
在该 div 的 css 内部：
min-width: 100%;
max-width: 100%;
最小宽度：100%；
最大宽度：100%；
This will freeze the width, you can do the same for height too.
这将冻结宽度，您也可以对高度执行相同操作。
回答by Diego Mariano
I read in another post a solution that I didn't test yet...
我在另一篇文章中读到了一个我还没有测试过的解决方案......
Maintain div size (relative to screen) despite browser zoom level
that's the used javascript:
这是使用的javascript：
//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.)
function flaotingDiv(){
//How much the screen has been zoomed.
var zoomLevel = ((screen.width)/(window.innerWidth));
//By what factor we must scale the div for it to look the same.
var inverseZoom = ((window.innerWidth)/(screen.width));
//The div whose size we want to remain constant.
var h = document.getElementById("fontSizeDiv");
//This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom.
h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";
//This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up.
h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";
//Finally, we shrink the div on a scale of inverseZoom.
h.style.zoom = inverseZoom;
}
//We want the div to readjust every time there is a scroll event:
window.onscroll = flaotingDiv;
回答by isNaN1247
You should just be ablemto set a width and height in css using a px measurement
您应该能够使用 px 测量值在 css 中设置宽度和高度
Eg
例如
div
{
width:100px; height:200px;
}
