Use of text-size-adjust [CSS] versus meta[name=viewport] and @viewport

[ebollens]

The css/open_framework.css file defines the following:

body {
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

However, templates/html.tpl.php uses the meta[name="viewport"] element:

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

I'm curious what the motivation for providing both was? If my understanding from the CSS Mobile Text Size Adjustment Module Level 1 ED (http://dev.w3.org/csswg/css-size-adjust) is accurate, I'm not sure specifying it at all is needed.

Further, I've got some concerns about behavior...

Per Microsoft's documentation, the CSS definition is redundant:

The –ms-text-size-adjust property is ignored where the viewport tag is present.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx#sectionToggle2

Apple does not impose such constraints, but rather it does state:

On iPad, the default value for -webkit-text-size-adjust is none. On all other devices, the default value is auto.
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html

Currently, this is explicitly defined, so Apple's browsers will accept it - and I'd assume that this is probably across the board true for WebKit - but this means there's non-uniform behavior between the browsers, especially because Gecko doesn't allow you to specify a percentage value.

Based on this, my recommendation is as follows:

• Specify -webkit-text-size-adjust: auto in css/open_framework.css to normalize the fact that iPad strangely defaults to -webkit-text-size-adjust: none (against the recommendation of the CSS Mobile Text Size Adjustment Module Level 1 ED) - or just remove it altogether for simplicity and let default behavior kick.
• Remove -ms-text-size-adjust: auto as it will be ignored.
• Continue using the meta[name=viewport] tag to specify scaling.

Additionally, if we're looking at EDs as valid for use, then another ED that might be worth thinking about is the CSS Device Adaptation ED (http://dev.w3.org/csswg/css-device-adapt). You'll note that meta[name=viewport] is non-nomative (it's actually not defined as officially anywhere - just implemented pretty universally), and we might want to consider adding an @viewport statement (good article on this at http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport).

[meganem]

This is very thorough, thank you. We'll have to take a closer look at what your recommendation does in action.