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 540×960 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 540×960, 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!
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