posting from my iPhone... Problems with width of iPhone apps
David Cann
safari is assuming an 800px width. Anyone found a solution to this
yet?
-d
Kevin Darling
I'm having a little trouble seeing your device ;-)
What does it do? Spread it out or zoom it or ?
Joe Hewitt
<meta name="viewport" content="width=320">
I found that in the source for onetrip, which is the only one of the
"ready for iPhone" apps that I've found which is formatted correctly
on the actual phone.
David Cann
Christopher Allen
> safari is assuming an 800px width. Anyone found a solution to this
> yet?
Since the iPhone does not have a "window", it has to decide what width
to use when it first renders the page in the zoomed-out mode. By
default it renders it in 980 pixels wide, which they said they found
the be the best number for most web sites. My assumption is that this
number was also picked as it is just a little over 3 times the width
of the iPhone. (Note there is an exception, if you connect to a .mobi
domain the iPhone defaults to a viewport of 320.)
Often 980 is not the appropriate size -- for instance, some narrow
pages (such as many single column word press blogs) will render with a
huge amount of white space to the left and right. In theses cases, you
can use a meta tag in the <head> to give the iPhone a hint as to what
viewport size to use, for example <meta name="viewport"
content="width=560" /> will render the initial window in a smaller
width window.
My belief is that for a web page to be considered iPhone "friendly"
(as per my post at
http://groups.google.com/group/iphonewebdev/browse_thread/thread/b1999dab60faa596
) that a web page must have a meta viewport tag.
If you give the hint <meta name="viewport" content="width=320" /> you
will get no scaling which is appropriate for iPhone webapps. However,
there is some question in my in my mind if this is the best technique,
as if you are using the iPhone in horizontal orientation, the initial
viewport will now be too narrow.
Instead, you may be able to use one of the other choices for viewport,
which in addition to height is
initial-scale (first loaded scale), user-scalable (boolean),
minimum-scale (default 0.25), maximum-scale (default 1.6).
I think some experimentation is required as to what is the best
approach. I suspect that something like <meta name="viewport"
content="initial-scale=1.0" /> may be the best choice for iPhone
webapps, as I think it will do the right thing at both orientations.
I'd test this myself tonight, but because of an AT&T activation SNAFU,
I'll not have my iPhone activated until tomorrow, so if someone else
can test some of these viewports, I'd appreciate it.
-- Christopher Allen
Julian David
iPhone Safari browser from zooming out on every page, even when the
HTML/CSS would permit the content to be shown without zooming out.
I have tried to test this on the "emulator" iPhoney, but it doesn't
appear to work there.
What folks like me who don't yet have an iPhone in hand need to know
include:
(1) What apps on the Internet work on an actual iPhone without
constant zooming -- please provide website so one can look at their
HTML/CSS
(2) Does the Viewport suggestion above work? Can you point to an
Internet app that successfully uses it?
Thanks, everyone.
David Cann
to Safari after using other apps on the phone? I suspect this is a
memory management issue, but it's very annoying and a bad user
experience on AJAX apps. I ought to be able to keep several tabs open
in the background at all times and return to them right where I left
off. When you refresh the page on most AJAX apps, you're returned to
the home page.
The slow JavaScript execution has really been bugging me, so I ran a
speed test here:
http://celtickane.com/projects/jsspeed.php
On my dual G5, I get about 430 milliseconds, but on my iPhone, I'm
consistently getting greater than 10,000 milliseconds!
It's clear now why their WWDC web app was so simple and really not web
2.0 or AJAX at all. Considering these fairly serious flaws is giving
me hope that this is a temporary stop-gap measure on Apple's part
while they are (hopefully) working on a Cocoa-esque API for us.
-d
On Jun 30, 2:12 am, "Christopher Allen"
<Christoph...@iPhoneWebDev.com> wrote:
> On 6/29/07, David Cann <davidjc...@gmail.com> wrote:
>
> > safari is assuming an 800px width. Anyone found a solution to this
> > yet?
>
> Since the iPhone does not have a "window", it has to decide what width
> to use when it first renders the page in the zoomed-out mode. By
> default it renders it in 980 pixels wide, which they said they found
> the be the best number for most web sites. My assumption is that this
> number was also picked as it is just a little over 3 times the width
> of the iPhone. (Note there is an exception, if you connect to a .mobi
> domain the iPhone defaults to a viewport of 320.)
>
> Often 980 is not the appropriate size -- for instance, some narrow
> pages (such as many single column word press blogs) will render with a
> huge amount of white space to the left and right. In theses cases, you
> can use a meta tag in the <head> to give the iPhone a hint as to what
> viewport size to use, for example <meta name="viewport"
> content="width=560" /> will render the initial window in a smaller
> width window.
>
> My belief is that for a web page to be considered iPhone "friendly"
> (as per my post athttp://groups.google.com/group/iphonewebdev/browse_thread/thread/b199...
David Cann
working last night with the viewport meta tag:
Three issues that I'm still having:
* Lack of the onmousedown event is blocking my custom div flick
scroll... both horizontal and vertical.
* When the user clicks on a text box, it automatically zooms in, but
when exiting the text box, it doesn't automatically return to the
zoomed out state. I'm testing if I can set the default size of the
text box to be so large that Safari realizes it doesn't need to zoom
in.
* The incredibly slow JavaScript execution is making my YUI animations
very choppy.
-d
Julian David
name="viewport" content="width=320" /> in the HTML <head> prevents the
iPhone Safari browser from zooming out, as long as the body of the
page does not have content wider than 320. The iPhone also appears to
scale well when rotated.
We tried the <meta name="viewport" content="initial-scale=1.0" />
declaration in an actual iPhone and it did what it is supposed to do
(scale up to the larger width), but we found it less preferable
because it scaled things too much. For instance most lines of text
longer than 12 characters at 10pt size wrapped.
Our conclusion is to use Christopher's first suggestion: <meta
name="viewport" content="width=320" /> and then tweak/play if your
application has special needs.
Thanks all!
Christopher Allen
> I have confirmed from an actual iPhone user that using <meta
> name="viewport" content="width=320" /> in the HTML <head> prevents the
> iPhone Safari browser from zooming out, as long as the body of the
> page does not have content wider than 320. The iPhone also appears to
> scale well when rotated.
I've found so far I'm unhappy with viewport of 320 in horizontal
orientation. I want the visual size of the fonts in horizontal to be
the same size as the fonts in vertical. I just want the text to be
reflowed wider.
> We tried the <meta name="viewport" content="initial-scale=1.0" />
> declaration in an actual iPhone and it did what it is supposed to do
> (scale up to the larger width), but we found it less preferable
> because it scaled things too much. For instance most lines of text
> longer than 12 characters at 10pt size wrapped.
>
> Our conclusion is to use Christopher's first suggestion: <meta
> name="viewport" content="width=320" /> and then tweak/play if your
> application has special needs.
That is too bad -- I was hoping inital-scale would do what I want and
keep the font sizes the same in both orientations.
Have you tried any of the other viewport variants? user-scalable,
minimum-scale, maximum-scale? How about font size tweaks using:
<tag style="-webkit-text-size-adjust:none">
<tag style="-webkit-text-size-adjust:auto"> default
<tag style="-webkit-text-size-adjust:200%">
-- Christopher Allen
nroose
There seem to be several:
<meta name="viewport" content="width=320" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="user-scalable=false" />
<meta name="viewport" content="width=560" />
and even perhaps
<meta name="viewport" content="maximum-scale=2.0" />
Or something like that.
So, I don't have an iPhone, but I am trying to make my web app iPhone
friendly, and I think this should be done, I have made a page that
takes the querystring and puts it into meta viewport tags.
So, for instance
http://www.timeeclipse.com/viewport.asp?width=320
Will put
<meta name="viewport" content="width=320" />
in there. Feel free to test various combinations. And please post
the results and any feedback.
dvogel
320 for the content and using the viewport(width=320) and it works
like a champ.
Chris
iPhone group (http://lists.ranchero.com/listinfo.cgi/iphone-
ranchero.com):
The "viewport" is actually part of canvas, which is what WebKit
leverages to do all it's funky magic. Quite simply: "The viewport is
the part of the screen that you are currently seeing; everything you
see from the webpage is part of the viewport."
Whereas the canvas is everything else: "The canvas is the part of the
document the background-image is painted on. You can say it has an
infinite height and width so you can't position something on it."
This is from: http://annevankesteren.nl/2004/05/viewport-canvas-root
Here's the definition on the W3 site.. it's actually part of the
CSS2.1 spec:
http://www.w3.org/TR/CSS21/visuren.html#q2
There's more here from a WWDC tutorial:
> Default view port width is 390px. It's easy to get too narrow if you're not careful. Need to specify viewport property. <meta name="viewport" content="widget=320" />
>
> Six view port properties that can be set.
>
> width, height, initialscale, user - scalable ...
>
> We'll need to take advantage of -"WebKit":http://webkit.org/-text-size-adjustment to make things legible after double tap. -wgetkit-text-size-adjust:none|auto|percentage
http://www.atomictypewriter.org/read.php/WWDC07_Apple_Developer_Conference_Day_2.txt
Anyway, that should give you some idea of what's going on. I find it
odd that they're using a metatag rather than a CSS property applied to
the body, but maybe that's something we should lobby the webkit folks
on... ;)
Chris
Christopher Allen
> > Default view port width is 390px. It's easy to get too narrow if you're not careful. Need to specify viewport property. <meta name="viewport" content="widget=320" />
The actual default for non-.mobi domains is 980, which is why iPhone
optimized web pages always appear so small on the screen. .mobi
domains default to 320.
-- Christopher Allen
Jeff Harrell
it seems to keep the page from initially displaying at less than 1:1.
Based on reports from friends, anyway.
Christopher Allen
> I've added <meta name="viewport" content="width=320"> to my site, and
> it seems to keep the page from initially displaying at less than 1:1.
> Based on reports from friends, anyway.
If you are going to do width=320, I'd highly recommend you also set
user-scalable=0 (someone has reported that user-scalable=false may not
work, but I've not confirmed it yet).
The reason why is that you'll find that after certain actions, in
particular text input, that the scaling will go beyond 100%, making
your page to require scrolling to use, or pinching to return back to
the 320 wide.
I don't think this is the ultimate solution, as there are still issues
with horizontal orientation that are being worked out, but using the
above seems to solve 90% of them.
-- Christopher Allen