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:
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).
The
css/open_framework.css
file defines the following:However,
templates/html.tpl.php
uses themeta[name="viewport"]
element: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:
Apple does not impose such constraints, but rather it does state:
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:
-webkit-text-size-adjust: auto
incss/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.-ms-text-size-adjust: auto
as it will be ignored.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).