当用户放大和缩小页面时，如何保持 <div> 的大小不变？

Question

在面对用户放大和缩小页面时，是否有一种 html/css/javascipt 方法可以将

保持在恒定大小？也就是说，使用 control-plus 来增加文本大小和 control-minus 来减小它。

编辑： 我想，最重要的是我希望

的 content 也保持相同的大小.

谢谢！

编辑：我的目标是（并且是）防止 AdSense

扩展太多以至于掩盖页面上的许多真实内容。但是来发现（谢谢@thirtydot）真的没有什么好方法可以做到这一点。对我来说，答案是（谢谢@Neal！）：给出

溢出：滚动以便牺牲它的内容而不是我试图显示的内容。

【问题讨论】：

• 你想保持一个固定的像素宽度和高度，还是相对于浏览器窗口大小的固定大小？
• 发布您正在处理的代码，有点开放式。您的意思是相对于（视口）大小的常数还是使用像素时的常数？
• 用户如何调整大小？您是指缩放还是更改浏览器窗口大小？
• @lee @colinross -- 恒定为 1.255 微弗隆宽。
• 您为什么要让您的用户感到困惑？这就像阻止右键单击您的网站或在您的网站上打开带有 iframe 的模式中的每个链接 -_-

Answer 1

.box {
    background: red;
    width: 5vw;
    height: 10vh;
    position: absolute;
    top: 10vh;
    left: 5vw;
}

<div class="box"></div>

Answer 2

没有好的方法（阅读：可靠）可以做到这一点。对不起。

您所要求的基本上归结为检测浏览器的缩放级别，这里有一个很好的答案（确认这是多么困难）：

• How to detect page zoom level in all modern browsers?

如该答案所述，有一种“有点”的跨浏览器疯狂方式涉及使用 Flash，但也有缺点：

• 它使用 Flash。
• 如果用户加载您的页面已经放大，则不可靠。
• 它使用 Flash。是的，这太糟糕了，我说了两次。想想所有那些 iPhone/iPad。

无论如何，它在这里：
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/

Answer 3

我不确定你的意思，只是使用 css：

div#id {
    width: 100px; /*or some other #*/
    height: 100px; /*or some other #*/
}

html:

<div id="id">some content</div>

Answer 4

要使 div 的大小在缩放时不变（但不是其中的内容），请执行以下操作：
在该 div 的 CSS 中：

最小宽度：100%；
最大宽度：100%；

这将冻结宽度，您也可以对高度执行相同操作。

Answer 5

您应该能够使用 px 测量值在 css 中设置宽度和高度

例如

div
{
width:100px; height:200px;
}

Answer 6

我在另一篇文章中读到了一个我尚未测试的解决方案...

Maintain div size (relative to screen) despite browser zoom level

这是使用的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;