For those of use creating iPhone optimized or iPhone webaps (see my original post "ur classes of website support of iPhone" http://groups.google.com/group/iphonewebdev/browse_thread/thread/b199... for definitions) we have to carefully set viewport tags, as a site without them can actually look worse then an ordinary website when viewed on the iPhone.
It seems that a good start for everyone is just two meta viewport settings in our <head> :
The addition of user-scalable=false is very important, as websites that only use width=320 will often get scaled after certain types of actions, in particular text input actions. This requires the user to pinch the screen to restore the view or to scroll.
(P.S. there was a report that user-scalable=false didn't work, and that we should use user-scalable=0 instead, but I just confirmed false does work properly.)
However, though this is a good start, especially for iPhone webapps that are focused on vertical orientation, I'm not sure that it is ideal in the long run.
The main reason is that I'm not sure that this is ideal for use in horizontal orientation. What happens when you switch to horizontal when using the meta viewport above is that the webpage is zoomed out visually from 320 to fit the 480 wide, making the fonts even bigger, when IMHO you want to fonts to be the same size.
If you initially load this page in vertical orientation, I think it looks good. If you change the display to horizontal orientation it isn't quite right, but if you double-tap it it will also look good. From now on if I switch between horizontal and vertical orientation, both will look good without any double-tapping.
Ideally what I want is not to have to double-tap that first time I switch to horizontal orientation. It is possible that a simple javascript can solve this if we can figure out what event is triggered when orientation changes.
It should keep the text size the same as you rotate the device. It assumes you're starting in portrait mode, though. It will send an alert() reporting which mode it's changing too... oddly, though, the alerts seem to only be fired some of the time... I'm not sure why.
You can view source on it, but it's basically calling:
> For those of use creating iPhone optimized or iPhone webaps (see my > original post "ur classes of website support of iPhone"http://groups.google.com/group/iphonewebdev/browse_thread/thread/b199... > for definitions) we have to carefully set viewport tags, as a site > without them can actually look worse then an ordinary website when > viewed on the iPhone.
> It seems that a good start for everyone is just two meta viewport > settings in our <head> :
> The addition of user-scalable=false is very important, as websites > that only use width=320 will often get scaled after certain types of > actions, in particular text input actions. This requires the user to > pinch the screen to restore the view or to scroll.
> (P.S. there was a report that user-scalable=false didn't work, and > that we should use user-scalable=0 instead, but I just confirmed false > does work properly.)
> However, though this is a good start, especially for iPhone webapps > that are focused on vertical orientation, I'm not sure that it is > ideal in the long run.
> The main reason is that I'm not sure that this is ideal for use in > horizontal orientation. What happens when you switch to horizontal > when using the meta viewport above is that the webpage is zoomed out > visually from 320 to fit the 480 wide, making the fonts even bigger, > when IMHO you want to fonts to be the same size.
> If you initially load this page in vertical orientation, I think it > looks good. If you change the display to horizontal orientation it > isn't quite right, but if you double-tap it it will also look good. > From now on if I switch between horizontal and vertical orientation, > both will look good without any double-tapping.
> Ideally what I want is not to have to double-tap that first time I > switch to horizontal orientation. It is possible that a simple > javascript can solve this if we can figure out what event is triggered > when orientation changes.
> It should keep the text size the same as you rotate the device. It > assumes you're starting in portrait mode, though. It will send an > alert() reporting which mode it's changing too... oddly, though, the > alerts seem to only be fired some of the time... I'm not sure why.
> You can view source on it, but it's basically calling:
Very useful -- I'm sure that something in this direction will be the best solution.
I've temporarily added your script to my sample page http://www.iphonewebdev.com/viewport-test.php and I'm getting the same thing where the alert is not fired off. Most importantly, the first time you change from portrait/vertical to landscape/horizontal it does not trigger and the page scaling looks off.
Weirdly, when I return to portrait I get the message "switching to landscape: 464x2877" so I expect there may be a logic error someplace. Also where the value 464 comes from is very curious to me.
Other then this one javascript alert, I never see the alert again when I change orientation.
My problem with your javascript is that you are changing the viewport width, which means that when you switch to the landscape/horizontal orientation we are back to the point were we are getting the weird font size problem. I want the font size to look exactly the same, just reflowed, in both orientations.
I'll puzzle through this a bit and see if I can't figure it out. Setting the viewports, and figuring out how to hide the URL bar seem to me to be the highest priority problems for the most people that are members of this list right now.
This exemplifies at least two different bugs, both of which I need to narrow down more before submitting to apple bug system.
* If you load the page with portrait/vertical orientation, the first time orientation changes to landscape/horizontal, the window.onresize function is not called. Returning orientation to portrait reports "resize detected: 464x2877". Returning to landscape once again reports "resize detected: 704x2069". From now on you'll get resize events detected every time you change orientation. The bug is that you should get a resize event the first time orientation changes.
* The second bug is harder to track down -- if you do this repeatedly, and also double-tap the display to making the scaling look right, you'll end up with iSafari locking up with the display darkgrayed. It is as if it is trying to load a javascript alert dialogue, but doesn't quite get there, and since there is no way to cancel, you are locked out. The only way to get out is to click the home button repeatedly.
I have reported the first bug via apple's bug report system.
Problem ID: 5306129
Title: window.onresize event handler fails to be triggered on first orientation changes
01-Jul-2007 05:55 PM Christopher Allen: Summary:
In iSafari, the window.onresize event handler should be triggered on all orientation changes between portrait and landscape. Typically, the first orientation change, and often the first two orientation changes, the event is not triggered, but then is triggered for every subsequent window.onresize event.
Steps to Reproduce:
1 - Create an simple html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test of window.onresize</title> <meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" id="viewport" /> <script language="JavaScript"> window.onresize = function () { alert("window.onresize detected: "+ document.body.offsetWidth +"x"+ document.body.offsetHeight); }; </script> </head> <body> <h1>Test of window.onresize</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
2. Load in iPhone safari while holding in portrait orientation 3. Change physical orientation of iPhone of multiple times, dismissing the javascript alert after each orientation change.
Expected Results:
The javascript alert should be presented each time the orientation of the phone is changed.
Actual Results:
Typically the first two times the physical orientation of the phone changes, the window.onresize event handler is not triggered. All subsequent changes of orientation will trigger the window.onresize event handler.
Regression:
Occurs on iPhone 1.0 (1A543a).
Notes:
In another test page with slightly different html, the window.onresize event handler was not triggered on the first orientation change, but was triggered on the second. Not sure why. Another developer reported that some intermittent orientation changes after the first successful window.onresize alert were not sent either, although I've not experienced this behavior in the test script above.
I have categorized this bug as a serious bug, as all developers creating iPhone webapps need to be able to recognize that the iPhone's orientation has changed in order to appropriately change the viewport size and alter the UI. Currently there can be weird behaviors if you change orientation, making iPhone webapps very difficult. For instance, ideally we want to change the viewport width dynamically after a window.onresize to make the UI consistent at all orientations.
The best workaround for this is to use setInterval to "poll" for changes to window.innerWidth. I have it checking every 300ms or so, which doesn't cause any performance issue, and reacts immediately when you rotate the phone.
On 7/1/07, Joe Hewitt <joehew...@gmail.com> wrote:
> The best workaround for this is to use setInterval to "poll" for > changes to window.innerWidth. I have it checking every 300ms or so, > which doesn't cause any performance issue, and reacts immediately when > you rotate the phone.
Got some sample code or a web page for us to try? ;-)
> I have reported the first bug via apple's bug report system.
> Problem ID: 5306129
> Title: window.onresize event handler fails to be triggered on first > orientation changes
> 01-Jul-2007 05:55 PM Christopher Allen: > Summary:
> In iSafari, the window.onresize event handler should be triggered on > all orientation changes between portrait and landscape. Typically, the > first orientation change, and often the first two orientation changes, > the event is not triggered, but then is triggered for every subsequent > window.onresize event.
> Steps to Reproduce:
> 1 - Create an simple html page:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html> > <head> > <title>Test of window.onresize</title> > <meta name="viewport" content="width=480; initial-scale=0.6666; > maximum-scale=1.0; minimum-scale=0.6666" id="viewport" /> > <script language="JavaScript"> > window.onresize = function () { > alert("window.onresize detected: "+ document.body.offsetWidth > +"x"+ document.body.offsetHeight); > }; > </script> > </head> > <body> > <h1>Test of window.onresize</h1> > <p> > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do > eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad > minim veniam, quis nostrud exercitation ullamco laboris nisi ut > aliquip ex ea commodo consequat. Duis aute irure dolor in > reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla > pariatur. Excepteur sint occaecat cupidatat non proident, sunt in > culpa qui officia deserunt mollit anim id est laborum. > </p> > </body> > </html>
> 2. Load in iPhone safari while holding in portrait orientation > 3. Change physical orientation of iPhone of multiple times, dismissing > the javascript alert after each orientation change.
> Expected Results:
> The javascript alert should be presented each time the orientation of > the phone is changed.
> Actual Results:
> Typically the first two times the physical orientation of the phone > changes, the window.onresize event handler is not triggered. All > subsequent changes of orientation will trigger the window.onresize > event handler.
> Regression:
> Occurs on iPhone 1.0 (1A543a).
> Notes:
> In another test page with slightly different html, the window.onresize > event handler was not triggered on the first orientation change, but > was triggered on the second. Not sure why. Another developer reported > that some intermittent orientation changes after the first successful > window.onresize alert were not sent either, although I've not > experienced this behavior in the test script above.
> I have categorized this bug as a serious bug, as all developers > creating iPhone webapps need to be able to recognize that the iPhone's > orientation has changed in order to appropriately change the viewport > size and alter the UI. Currently there can be weird behaviors if you > change orientation, making iPhone webapps very difficult. For > instance, ideally we want to change the viewport width dynamically > after a window.onresize to make the UI consistent at all orientations.
