Geek Answers Handbook

How to keep the constant <div> in size when the user zooms in and out of the page?

Is there an html / css / javascipt way to maintain a <div> with a constant size in the face of the user who enlarges and resizes the page? That is, using control-plus to increase the size of the text and control-minus to reduce it.

EDIT: I think kicker is what I want the content in the <div> to stay the same size.

Thank!

EDIT: My goal was (and) not to extend the AdSense <div> to outshine a lot of the real content on the page. But come to find out (thanks @thirtydot), there really is no good way to do this. Answer for me (thanks @Neal!): Give overflow <div>: scroll to sacrifice my content, not the content that I'm trying to show.

+5
source share
5 answers

There is no good way (read: reliable) to do this. Unfortunately.

What you are asking for basically comes down to detecting the zoom level of the browser, and there is an excellent answer here (confirming how complicated it is):

, "" - , Flash, :

  • Flash.
  • , , .
  • Flash. , , . iPhones/iPads.

, :
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/

+1

, , css:

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

HTML:

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

div ( ), :
css div:

min-width: 100%;
max-width: 100%;

, .

+1

css, px

,

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

, ...

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 not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it 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 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;
0

More articles:


All Articles