mobile/iOS css revisions

[paulirish]

(I have revised this ticket summary after the issue has been fixed for clarity)

• Scott jehl was concerned with maximum scale = 1
• @riddle posted a few concerns as well.. "No scaling, no text adjustment?"

After discussions with Matt Henry, a front-end dev mobile expert, recently from Yahoo!, now at Viget...
We concluded to drop maximum-scale=1 and leave text-size-adjust commented out by default.

max-scale doesnt let the user zoom in as they please. However it prevents some weird layout shifting when a device is changed from portrait to landscape. It doesn't seem like a good default.

initial-scale remains 1. It's default is 'auto' and I have no understanding why a mobile browser would set it to anything other than 1, but it's explicitly set for now..

Also.. worth watching http://people.opera.com/rune/TR/css-viewport/ (though it's unimplemented anywhere so far)

[nimbupani]

maximum-scale is to prevent zooming in or zooming out when the mode is altered from portrait to landscape.

"Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">"

from http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

[paulirish]

from the man who recommended it.. http://paulirish.com/i/e020.png

maximum scale looks on its way out.

initial-scale, then.. retain?

[nimbupani]

This is what Safari doc says about initial-scale:

"The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.
You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties."

http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html

[paulirish]

new comment:

Just finished my first site using the Boilerplate, and it was causing horizontal scroll bars on the iPad. Discovered the culprit was line 23 in index.html:

meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"

Commenting it out fixed it. I like how the iPad zooms to fit the page width automatically. So what is the point of forcing it to 1:1 scale?

[paulirish]

I've discussed things with Matt Henry (@greenideas.. mobile expert) and Divya..

here's the plan:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

and
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

[paulirish]

fixed in 7a33f72

[sporkd]

I couldn't figure out why one of my sites using html5boilerplate was only 320px wide on the iPhone and was zoomed way in like this pic (on the right): http://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/Art/toosmall.jpg

Also, background images were cut off outside the 320px wide window.

I finally figured out that by changing initial-scale to auto, it fixed everything and zoomed out to show the whole 980px wide site. I also tried setting width to 980, but the combination of width=device-width and initial-scale=auto seemed to work best (i.e. similar to when the viewport tag is not included at all... the defaults)

Mind you, I don't yet have a mobile version of my site, nor does it dynamically scale in width, however, I think the current default will be confusing to many people with 980px wide sites that can't be un-floated. I still think there's value to having the tag there, but I don't know if zooming in to 320px by default is what people will want. Or at least a comment with a link to the viewport docs might help: http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW28

Peter

[nimbupani]

Peter, the viewport comment links to this issue, where your links (and issues) are visible. I think that is ample?

Also, my view is when a site is zoomed out, a user would anyway click to zoom in, as at that view, the links and text are way too small to see.

Do re-open if you think this is not satisfactory.

[yellow1912]

initial-scale=1 I have an issue on iphone: for the divs that I have the width set at 100% the background color only gets spanned exactly the width of the device (while the whole website itself is displayed much larger than the device's width)

using "auto" fixes it

[Kusadam]

I tried all but nothing http:/kusadam.com