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

问题描述

| 有没有html / css / javascipt方式可以在用户放大和缩小页面时将

保持恒定大小？也就是说，使用control-plus增大文本大小，使用control-负号减小文本大小。编辑：踢球者，我想是，我也希望

的内容保持相同大小。谢谢！编辑：我的目标是（并且是）阻止AdSense

扩展到足以掩盖页面上许多真实内容的程度。但是请找出来（谢谢@thirtydot），确实没有很好的方法。对我来说，答案（谢谢@Neal！）：给

溢出：滚动，以牺牲其内容而不是我要显示的内容。

解决方法

没有好的方法（请参阅：可靠）来执行此操作。抱歉。您的要求基本上可以归结为检测浏览器的缩放级别，并且这里有一个很好的答案（确认这有多困难）：如何在所有现代浏览器中检测页面缩放级别？如该答案所述，存在涉及使用Flash的“跨类”跨浏览器疯狂方式，但存在以下缺点：它使用Flash。如果用户加载已放大的页面，则不可靠。它使用Flash。是的，这太糟糕了，我说了两次。想想所有这些iPhone / iPad。无论如何，它在这里： http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/ ,我不确定您的意思，只需使用CSS：

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

的HTML：

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

,要使div大小不变（而不是缩放内容），请执行以下操作：在该div的CSS内：最小宽度：100％；最大宽度：100％；这将冻结宽度，您也可以对高度进行相同操作。 ,您应该只能够使用px测量来在CSS中设置宽度和高度例如

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

,我在另一篇文章中读了一个尚未测试的解决方案... 不管浏览器的缩放级别如何，都保持div大小（相对于屏幕）那是使用的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 不变不变保持大小大小用户用户用户缩小缩小页面页面