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

Question

Hello all,

I'm creating a bookmarklet for my iPhone which will add a scrolling menu to the upper-left corner of the screen. The problem I've run into is that if I visit a site which can be zoomed in, when I zoom in my "floating" div becomes larger as I zoom in the page. Is there a way so that my div will be .2 inches wide (measurable with a measuring tape, so to speak) no matter how far I zoom in my Safari browser?

Thanks, Oliver

Answer 1

You could use percentage positions and widths, which are not affected by zoom.

http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript/995967#995967

Answer 2

http://stackoverflow.com/questions/668462/safari-iphone-how-to-detect-zoom-level-and-offset

You might also want to check the answers to this question as well as they provide information on how you can actually calculate the zoom level (although it's being advised against relying on it for important stuff). If everything else fails, having the zoom value, you could write a small script to adjust the size of your div based on it.

Hope this helps.

Answer 3

This is the solution I finally came up with (with lots of comments.)

//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;