More on meta viewports tag
Christopher Allen
original post "ur classes of website support of iPhone"
http://groups.google.com/group/iphonewebdev/browse_thread/thread/b1999dab60faa596
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> :
<meta name="viewport" content="width=320; user-scalable=false" />
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.
To date I've not figured out how to do this.
I do find that I like one of my experiments:
<meta name="viewport" content="width=480; initial-scale=0.6666;
maximum-scale=1.0; minimum-scale=0.6666" />
You can see this in a very simple demonstrated at
http://www.iphonewebdev.com/viewport-test.php
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.
-- Christopher Allen
David Cann
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:
document.getElementById("viewport").setAttribute("content",
"width=480;", false);
within the window.onresize function.
-d
On Jul 1, 5:28 pm, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:
> 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...
> You can see this in a very simple demonstrated athttp://www.iphonewebdev.com/viewport-test.php
Christopher Allen
> window.onresize is called. Here's an example:
>
> http://davidcann.com/div
>
> 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:
>
> document.getElementById("viewport").setAttribute("content",
> "width=480;", false);
>
> within the window.onresize function.
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.
-- Christopher Allen
Christopher Allen
<script language="JavaScript">
window.onresize = function () {
alert("resize detected: "+ document.body.offsetWidth
+"x"+document.body.offsetHeight);
};
</script>
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.
-- Christopher Allen
Christopher Allen
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.
We have been discussion this bug in the www.iPhoneWebDev.com developer
discussion list in the topic "More on meta viewport tags" at
http://groups.google.com/group/iphonewebdev/browse_thread/thread/f43493a828dffdb3
Joe Hewitt
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.
Christopher Allen
Got some sample code or a web page for us to try? ;-)
-- Christopher Allen
Joe Hewitt
Tahoma
-- Tahoma
On Jul 1, 5:57 pm, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:
> discussion list in the topic "More on meta viewport tags" athttp://groups.google.com/group/iphonewebdev/browse_thread/thread/f434...
Christopher Allen
>
> http://www.joehewitt.com/tilt.html
Thanks! First thing in the morning I'm going to try to make this
technique work as a simple example for people doing iPhone optimized
web pages.
-- Christopher Allen
Christopher Allen
Joe,
Do have any ideas where the current scaling may be hidden? We can
change viewport settings dynamically with javacript like:
document.getElementById("viewport").setAttribute("content",
"width=480;", false);
But I can't seem to figure out how to read or change the scaling.
-- Christopher Allen
Joe Hewitt
Joe Hewitt
matter what the scale is.
Christopher Allen
> matter what the scale is.
I suspect it is hidden in there somewhere ;-)
I've been trying this, but it still isn't doing what we are seeking for:
setInterval(function()
{
if (window.innerWidth == 320) {
document.getElementById("debug-message").innerHTML = "portrait
iPhone: (" + window.innerWidth + "x" + window.innerHeight + ")";
document.getElementById("viewport").setAttribute("content",
"width=320;", false);
} else if (window.innerWidth == 480) {
document.getElementById("debug-message").innerHTML = "landscape
iPhone: (" + window.innerWidth + "x" + window.innerHeight + ")";
document.getElementById("viewport").setAttribute("content",
"width=480;", false);
} else
document.getElementById("debug-message").innerHTML = "unknown: ("
+ window.innerWidth + "x" + window.innerHeight + ")";
}, 300);
What happens is the first portrait page looks great, the first
landscape page though isn't correct, the font is scaled too large.
Then when you return to the portrait page, the width stays as 480 and
the portrait orientation is scaled small. From now on the innerWidth
stays 480.
-- Christopher Allen
D. Rich
<meta name = "Viewport" content = "maximum-scale=1.6,width=320" >
For their RSS website http://reader.mac.com/
On Jul 2, 2:53 am, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:
D. Rich
<meta name = "viewport" content = "maximum-scale=0.6667,width=480" >
The fonts will remain the same size in both portrait and landscape.
The width in portrait is 480 but the width in landscape is 720.
What is weird is that I don't reset the width, it changes on it's
own....
Don't know, but it works for me.
http://www.red-rome.com/test10.html
On Jul 2, 9:01 am, "D. Rich" <Dave...@gmail.com> wrote:
> Apple is using the mega tag
>
> <meta name = "Viewport" content = "maximum-scale=1.6,width=320" >
>
> For their RSS websitehttp://reader.mac.com/
CleverDaddy
that Apple recommends designing for 480 and not 320? That would lead
me to think D.Rich's viewport settings would work better than what was
found in reader.apple.com.
Is there no way to change the meta Viewport content via javascript?
I've seen people talking about changing other things, but not that
(unless I missed it somewhere). If it isn't possible, how about a
script that calls an AJAX rountine on the server on rotation? That
could then return a new meta tag setting. ie. have <meta
name="Viewport" content="width=320, maximum-scale=1.0"> be set when in
portrait, and <meta name="Viewport" content="width=480, maximum-
scale=1.0"> when in landscape. Then again, simply returning a new
meta tag setting may not cause Safari to 'see' it right away, without
a refresh. Also, the server code could do a simple check to see what
mode the screen is in when calling the initial page as well, returning
the appropriate Viewport setting. Of course, all of this would only
be a solution if you are developing a server based app and not a stand
alone like onetrip.org.
CleverDaddy
the whole AJAX based Vieport changing thing.