1

I have a div element on a page not formatted to mobile. I do not want to format this page to be mobile friendly though. When clicked, the div expands to the size of the mobile device. This works when the div is on a blank page, but it does not work when the div is on a page full of content. I've tried to use multiple ways to detect the screen or window height/width and it never scales correctly. What I think is happening is that:

The div detects the pixel width and height of the device correctly - so for a Droid Razr Maxx it detects 540x960 in portrait. Because this is a non-mobile site, the website is formatted to a zoomed out view. I don't want to adjust the zoom mechanics of the actual webpage, so the div is being formatted to 540x960, but relative to the size of the document - not that actual screen.

What I need to do is detect the pixel size of the visible frame, and adjust the div to the size in relation to the screen and not the page. Or I need to detect the size of the page in zoomed out mode - then scale to that?

Unfortunately I can not provide example code at this time.

Can anyone assist with this?

Thanks!

Alex
  • 37
  • 1
  • 6

1 Answers1

0

It's difficult without sample code to know exactly what you are trying to accomplish, but I'll paraphrase my understanding along with a possible solution.

It sounds like you have an element that, when clicked, expands to the width of the screen. However, in mobile phones, the screen != page. You want the element to remain only as wide as the screen--regardless of the zoom level.

If I am understanding this correctly, then it sounds like you might need to create a bit of jQuery (or POJS) that adjusts to the size of the window rather than the size of the page. The window.innerWidth property is updated when the user zooms. You may be able to use this value rather than clientWidth or any similar values.

Here's an example of using window.innerWidth to get the zoom level:

Detect page zoom change with jQuery in Safari

Community
  • 1
  • 1
Joe Davis
  • 233
  • 3
  • 11
  • You are definitely understanding what I am talking about One thing I've noticed is that I can designate the correct width using 'document.body.clientWidth' but the height does not scale correctly. I can adjust the height by doing something like this : '((screen.height)*(1.5));' but I'm unable to find that exact sweetspot to make the perfect adjustment. Will 'document.documentElement.clientWidth / window.innerWidth' give me the right zoom % which I can then use to scale the div height? – Alex Sep 11 '12 at 22:28
  • Since the page zooms by X as much as it does Y, then, logically, the zoom level of one should be the zoom level of the other. – Joe Davis Sep 11 '12 at 22:48
  • This actually ended up working: Width = document.body.clientWidth; Height = document.documentElement.clientHeight; – Alex Sep 12 '12 at 00:11