Javascript 如何保持<;部门>;当用户在页面上放大或缩小时大小是否恒定?

Javascript 如何保持<;部门>;当用户在页面上放大或缩小时大小是否恒定?,javascript,html,css,resize,size,Javascript,Html,Css,Resize,Size,在用户放大和缩小页面时,是否有一种html/css/javascipt方法可以保持页面的大小不变?也就是说,使用control plus增加文本大小,使用control减号减小文本大小 编辑:我想最重要的是,我希望的内容也保持不变 谢谢 编辑:我的目标是(现在也是)防止一个AdSense扩展到掩盖页面上许多真实内容的程度。但是来看看(谢谢你@thirtydot)这真的没有什么好办法。答案,对我来说(谢谢@Neal!):给溢出:滚动,以牺牲它的内容,而不是我试图显示的内容 我不知道你的意思,只需使

在用户放大和缩小页面时,是否有一种html/css/javascipt方法可以保持页面的大小不变?也就是说,使用control plus增加文本大小,使用control减号减小文本大小

编辑:我想最重要的是,我希望的内容也保持不变

谢谢


编辑:我的目标是(现在也是)防止一个AdSense扩展到掩盖页面上许多真实内容的程度。但是来看看(谢谢你@thirtydot)这真的没有什么好办法。答案,对我来说(谢谢@Neal!):给溢出:滚动,以牺牲它的内容,而不是我试图显示的内容

我不知道你的意思,只需使用css:

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

一些内容

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

乙二醇

没有好的方法(阅读:可靠)来做到这一点。对不起

您所要求的基本上归结为检测浏览器的缩放级别,这里有一个很好的答案(证实这有多困难):

正如答案中所述,使用Flash有一种“有点”跨浏览器的疯狂方式,但也有缺点:

  • 它使用Flash
  • 如果用户加载已放大的页面,则不可靠
  • 它使用Flash。是的,这太糟糕了,我说了两遍。想想那些iphone/ipad
不管怎样,它就在这里:

我在另一篇文章中读到一个我还没有测试过的解决方案

这就是使用的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的css中:

最小宽度:100%
最大宽度:100%

这将冻结宽度,您也可以冻结高度。

.box{
背景:红色;
宽度:5vw;
高度:10vh;
位置:绝对位置;
顶部:10vh;
左:5vw;
}

您想保持固定的px宽度和高度,还是相对于浏览器窗口大小的固定大小?发布您正在处理的代码,有点开放式。你的意思是相对于(视口)大小的常数还是使用像素时的常数?用户如何调整大小?你的意思是缩放还是改变浏览器窗口的大小?@lee@colinross——常数为1.255微缩长度。你为什么要混淆用户?这就像在你的网站上阻止右键点击或者在你的网站上打开带有iframe的模式中的每一个链接——我希望我错了,但是浏览器似乎可以调整所有内容的大小,包括像素尺寸的内容。不仅仅是像素尺寸,而是任何绝对尺寸。请让我的希望成真——告诉我我错了@Pete,只有当内容大于给定值时,浏览器才会调整内容的大小。您可以将
溢出:隐藏
添加到css中,以隐藏在css之外的任何内容boundary@Pete-你的意思是当用户缩放浏览器窗口时,你希望元素保持不变的绝对大小吗?@james6848-是的,这就是我的意思。天哪,我应该说“缩放”而不是“调整大小”。我现在就编辑它。谢谢。我确实读过那些页面——我不需要再做噩梦了。如果有人想知道它为什么有效,那是因为当用户缩放时,视口宽度会减小,而内容大小会增大。这意味着,在这种情况下,一切都是一样的,他们都过着幸福的生活。
div
{
width:100px; height:200px;
}
//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;