Getting either document-width or window-width from a scaled-down Mobile Safari browser

I'm doing a jquery-based lightbox on our site, and all is well on the major desktop OS browsers.

But on Mobile Safari, (both iPhone and iPad) - and probably also on Android devices - there's an issue due to the scaling feature on these browsers.

It's a 'normal' lightbox that inserts an overlay eleme开发者_开发百科nt and shows some images on top of that overlay.

Here's what I'm trying to do: I want to cover the entire window, so I get $(window).width() and $(window).height() and set the overlay to those values.

That's fine on normal desktop browsers, since they don't scale, but on scaling devices, it causes the overlay to be too narrow and too short, since those values are 768x946 and the actual width of the page on the desktop is over than 1400.

Yes, I could turn off scaling, but the site looks fine scaled down, so I would like to avoid that.

So the question must be: How do you get the actual unscaled width of either the window or the body-element, when the page is scaled down?

Thank you in advance :-) Martin

Have you tried to set the viewport? https://developer.mozilla.org/en/mobile/viewport_meta_tag

just forbid to zoom the page it should work :P