Question

是否有html / css / javascipt方法来维护＆lt; div＆gt;在用户缩放页面时，以恒定的大小？也就是说，使用control-plus来增加文本大小，使用control-minus来减少它。

编辑：我想，踢球者是我想要＆lt; div＆gt;的内容保持相同的大小。

谢谢！

编辑：我的目标是（并且是）保留AdSense＆lt; div＆gt;从扩展到掩盖页面上的许多真实内容。但是来找出（谢谢你@thirtydot）真的没有好办法做到这一点。答案，对我来说（谢谢@Neal！）：给＆lt; div＆gt;溢出：滚动以牺牲其内容而不是我试图展示的内容。

Answer 1

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

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

HTML：

<div id="id">some content</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

要使缩放的div大小不变（但不是其中的内容），请执行以下操作：
在你的css里面为那个div：

min-width：100％;
最大宽度：100％;

这会冻结宽度，你也可以对高度做同样的事情。

Answer 4

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

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

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;

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

6 个答案: