Reset the zoom/scale level via JavaScript?
4,891 views
Skip to first unread message
Adam Norwood
Jul 31, 2009, 10:29:10 AM7/31/09
to iPhoneWebDev
Hi all,
For the sake of the argument, let's assume I've got a web app with the
'viewport' meta tag set to initial-scale=1.0, maximum-scale=2.0 (or
whatever), and user-scalable=1. So I'm letting the user pinch-zoom.
After the user has pinch-zoomed in or out, is there a way to
programmatically reset their zoom/scale back to 1.0 using JavaScript
(or any other method, if there's something "magic" that I'm missing),
like when they click a "reset view" link/button?
I've had some progress: updating the <meta> tag using
viewport.setAttribute('content',...), I can change the user-scalable
flag, and that does actually change the ability to zoom in and out.
What I can't seem to figure out is if there's a way to get the scale
back to 1.0. I guess they're serious about the *initial* part of
initial-scale!
Anyone know a way to do this? Is there a DOM property someplace that
gets updated when the user pinch-zooms? I've noticed that
window.innerWidth reflects the zoomed size of the viewport, but it's
read-only (and window.sizeTo doesn't seem to do anything?).
For what it's worth, I'm using the latest iUI (0.30-beta1, very
snappy!), if that has any bearing on the problem.
Thanks much,
Adam
PS: I'm glad this list exists -- it's been very helpful getting me up
and running!
For the sake of the argument, let's assume I've got a web app with the
'viewport' meta tag set to initial-scale=1.0, maximum-scale=2.0 (or
whatever), and user-scalable=1. So I'm letting the user pinch-zoom.
After the user has pinch-zoomed in or out, is there a way to
programmatically reset their zoom/scale back to 1.0 using JavaScript
(or any other method, if there's something "magic" that I'm missing),
like when they click a "reset view" link/button?
I've had some progress: updating the <meta> tag using
viewport.setAttribute('content',...), I can change the user-scalable
flag, and that does actually change the ability to zoom in and out.
What I can't seem to figure out is if there's a way to get the scale
back to 1.0. I guess they're serious about the *initial* part of
initial-scale!
Anyone know a way to do this? Is there a DOM property someplace that
gets updated when the user pinch-zooms? I've noticed that
window.innerWidth reflects the zoomed size of the viewport, but it's
read-only (and window.sizeTo doesn't seem to do anything?).
For what it's worth, I'm using the latest iUI (0.30-beta1, very
snappy!), if that has any bearing on the problem.
Thanks much,
Adam
PS: I'm glad this list exists -- it's been very helpful getting me up
and running!
Jorge Chamorro
Jul 31, 2009, 2:17:16 PM7/31/09
to iphone...@googlegroups.com
Jorge Chamorro
Jul 31, 2009, 2:27:57 PM7/31/09
to iphone...@googlegroups.com
Ok. I've re-read what you wrote. No, this doesn't work... :-(
Maybe some unknown style property of the body element ?
--
Jorge.
Adam Norwood
Jul 31, 2009, 3:15:58 PM7/31/09
to iPhoneWebDev
Thanks Jorge for taking the time to write up a test page! That's
awesome. Your version does something that I hadn't tried yet, so it's
valuable: it shows that initially, before the pinch-zoom, it's
possible to control the scale via javascript, but once the pinch-zoom
occurs that functionality goes away completely and only comes back
when the page is reloaded. Hmm. Not sure what to make of that, but
it's definitely frustrating.
Back to the drawing board...
-Adam
awesome. Your version does something that I hadn't tried yet, so it's
valuable: it shows that initially, before the pinch-zoom, it's
possible to control the scale via javascript, but once the pinch-zoom
occurs that functionality goes away completely and only comes back
when the page is reloaded. Hmm. Not sure what to make of that, but
it's definitely frustrating.
Back to the drawing board...
-Adam
Jorge Chamorro
Jul 31, 2009, 7:06:08 PM7/31/09
to iphone...@googlegroups.com
On 31/07/2009, at 21:15, Adam Norwood wrote:
>
> Thanks Jorge for taking the time to write up a test page! That's
> awesome. Your version does something that I hadn't tried yet, so it's
> valuable: it shows that initially, before the pinch-zoom, it's
> possible to control the scale via javascript, but once the pinch-zoom
> occurs that functionality goes away completely and only comes back
> when the page is reloaded. Hmm. Not sure what to make of that, but
> it's definitely frustrating.
You're welcome. If you ever find it out please let me know. Thanks.
--
Jorge.
drewdeal
Aug 5, 2009, 5:53:09 PM8/5/09
to iPhoneWebDev
The orientation flip deals with the same issues, and from what I can
gather, it just listens on a timer and measures the width and alters
style accodingly. You can hack the same part of the iui.js to do your
stuff as well.
I did some similar stuff for my app at http://homesafari.us, I am
still dealing with some inconsistent behavior when the orientation
changes on my G1, but the iPhone emulator likes it. Be explicit on the
styles you need to conditionally trigger.
gather, it just listens on a timer and measures the width and alters
style accodingly. You can hack the same part of the iui.js to do your
stuff as well.
I did some similar stuff for my app at http://homesafari.us, I am
still dealing with some inconsistent behavior when the orientation
changes on my G1, but the iPhone emulator likes it. Be explicit on the
styles you need to conditionally trigger.
Adam Norwood
Aug 6, 2009, 1:05:54 PM8/6/09
to iPhoneWebDev
Unless I'm missing something, the orientation update techniques (like
the one in iUI) that are out there don't deal with the scale/zoom
level at all, but just swap out CSS classes/styles, right? After a
user has pinch-zoomed in, changing the <body>'s width doesn't seem to
have any real effect on the zoom (I'm looking for a way to bring the
zoom level back to 1.0). Do you know of a specific style or property
that might make this work?
So far my only real solution is to do a window.location.reload() to
reset everything. It's not exactly what I had in mind, but it's all
I've come up with...
-Adam
On Aug 5, 4:53 pm, drewdeal <drewd...@gmail.com> wrote:
> The orientation flip deals with the same issues, and from what I can
> gather, it just listens on a timer and measures the width and alters
> style accodingly. You can hack the same part of the iui.js to do your
> stuff as well.
>
> I did some similar stuff for my app athttp://homesafari.us, I am
the one in iUI) that are out there don't deal with the scale/zoom
level at all, but just swap out CSS classes/styles, right? After a
user has pinch-zoomed in, changing the <body>'s width doesn't seem to
have any real effect on the zoom (I'm looking for a way to bring the
zoom level back to 1.0). Do you know of a specific style or property
that might make this work?
So far my only real solution is to do a window.location.reload() to
reset everything. It's not exactly what I had in mind, but it's all
I've come up with...
-Adam
On Aug 5, 4:53 pm, drewdeal <drewd...@gmail.com> wrote:
> The orientation flip deals with the same issues, and from what I can
> gather, it just listens on a timer and measures the width and alters
> style accodingly. You can hack the same part of the iui.js to do your
> stuff as well.
>
M. Skullcap
Sep 21, 2009, 11:58:39 AM9/21/09
to iPhoneWebDev
One addition I have to this is that if you change the viewport in
javascript, then physically change your phone's orientation, the new
viewport scale is honoured.
I have spent a couple hours this morning experimenting with various
tricks to force a safari re-layout to no avail. Does anyone have any
suggestions? I too need to have the ability to rescale the webapp ui.
- Mike
javascript, then physically change your phone's orientation, the new
viewport scale is honoured.
I have spent a couple hours this morning experimenting with various
tricks to force a safari re-layout to no avail. Does anyone have any
suggestions? I too need to have the ability to rescale the webapp ui.
- Mike
GeoNomad
Sep 21, 2009, 8:05:32 PM9/21/09
to iPhoneWebDev
By coincidence, I am dealing with what seems to be a very similar
problem.
When I place an image on the page that is wider than 320 pixels, the
scale seems to automatically change to 1.125 to 1. If I want a header
to be the width of the screen, I have to set its width to 360. The 360
imaginary width is constant, even with an image 1800 pixels wide,
which is what I want to show.
document.body.offsetWidth returns 320.
My worry is that this 360/320 ratio will vary with OS version so I
don't want to hard code it, even though that works fine on my iPod.
(OS 2.2)
I can deal with setting the CSS to the width if I know what it is, but
haven't found the property to read to find the appropriate width.
(setting style.width = 100% results in a width of 320). Am I missing
some way to get the actual scale?
Or preferably, I would like to fix the scale at 1.0 and deal with
absolute positions and widths.
In landscape mode, the width is and stays at 480 as one would expect
with the same wide image displayed.
Any insights out there?
Thanks.
problem.
When I place an image on the page that is wider than 320 pixels, the
scale seems to automatically change to 1.125 to 1. If I want a header
to be the width of the screen, I have to set its width to 360. The 360
imaginary width is constant, even with an image 1800 pixels wide,
which is what I want to show.
document.body.offsetWidth returns 320.
My worry is that this 360/320 ratio will vary with OS version so I
don't want to hard code it, even though that works fine on my iPod.
(OS 2.2)
I can deal with setting the CSS to the width if I know what it is, but
haven't found the property to read to find the appropriate width.
(setting style.width = 100% results in a width of 320). Am I missing
some way to get the actual scale?
Or preferably, I would like to fix the scale at 1.0 and deal with
absolute positions and widths.
In landscape mode, the width is and stays at 480 as one would expect
with the same wide image displayed.
Any insights out there?
Thanks.
GeoNomad
Sep 22, 2009, 11:36:06 AM9/22/09
to iPhoneWebDev
Strange, I thought this went to the bitbucket as it didn't appear last
night.
Right after I typed the message I discovered I had omitted minimum-
scale=1.0 from the viewport setting. Putting that in fixed the scaling
issue that was driving me crazy.
Doh!
Jorge Chamorro
Sep 23, 2009, 7:43:02 AM9/23/09
to iphone...@googlegroups.com
I think I've found a way to do it ! See:
http://jorgechamorro.com/cljs/076/
Well, almost... :-)
--
Jorge.
David Kaneda
Sep 23, 2009, 2:26:47 PM9/23/09
to iphone...@googlegroups.com
Jorge,
That's pretty awesome. Thanks for investigating.
Dave
..............................................................Interface Design & Development
Reply all
Reply to author
Forward
0 new messages