SU-SWS / open_framework

Open Framework Drupal Theme
http://openframework.stanford.edu
GNU General Public License v2.0
209 stars 85 forks source link

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

Open ebollens opened 10 years ago

ebollens commented 10 years ago

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:

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 commented 10 years ago

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