Re: CSS Device Adaptation and legacy meta tags and doctypes

I wrote a set of test pages to determine what browsers support these:
jsbin.com/uyojoj/2

And tested using the following browser versions:
- (Legacy) Android Browser on Nexus S running ICS 4.0.4
- Chrome for Android beta 2 on Nexus S running ICS 4.0.4
- Firefox Aurora 14.0a2 (2012-05-13) on Nexus S running ICS 4.0.4
- Internet Explorer Mobile 9 on Nokia Lumia 800 running WP7.5
- Nokia Browser for N9 on Nokia N9 running MeeGo 1.2 Harmattan
- Opera Mobile 12.00.ADR-1204201824 on Nexus S running ICS 4.0.4
- Mobile Safari on iPod touch (4th gen) running iOS 5.1.1

Here are the viewport widths that the browsers calculated on the 4 test
pages:

Test: \ Browser:|Android|Chrome |Firefox|  IE   | Nokia | Opera |Safari |
----------------+-------+-------+-------+-------+-------+-------+-------+
Default         |  980  |  980  |  800? | 1024  |  980  |  980? |  980  |
XHTML-MP        |  320  |  320  |  320  |  320  |  320  |  320  |  320  |
HandheldFriendly|  320  |  320  |  800? |  320  |  320  |  980? |  980  |
MobileOptimized |  320  |  320  |  800? |  320  |  320  |  980? |  980  |

(there are question marks next to the Firefox and Opera widths since
window.innerWidth did not match the observed viewport width, so I had to
estimate these by eye)

It seems that all browsers already treat the XHTML-MP doctype as equivalent
to a width=device-width viewport, so I agree with Kenneth that it would
make sense for the Device Adaptation spec to explicitly formalize this
defacto standard in a normative section.

Handling of legacy HandheldFriendly and MobileOptimized viewport tags is
less consistent, but adding these to the specification could also be
useful, to improve interoperability.

In both cases the order of precedence Kenneth suggested (whereby modern
standards override legacy ones, irrespective of document order) seems wise,
as it reduces the risk of supporting the legacy methods.

Cheers,
John

On Wed, May 9, 2012 at 11:49 AM, Kenneth Rohde Christiansen <
kenneth.christiansen@gmail.com> wrote:

> Hi there,
>
> Following a discussion on webkit-dev [1], we would like to have added
> a nomative section in the CSS Device Adaptation spec [2], specifying
> how to handle legacy viewport tags, such as HandheldFriendly.
>
> The spec already briefly talks about XHTML-MP in the following:
>
> "Certain DOCTYPEs (for instance XHTML Mobile Profile) are used to recognize
> mobile documents which are assumed to be designed for handheld devices,
> hence
> using the viewport size as the initial containing block size."
>
> The Nokia N9 browser, WP7 Internet Explorer and Android already
> implement such support. And testing shows that iOS at least does
> similar things for XHTML-MP.
>
> The IE team even has a blog post explaining how it works [3]
>
> Basically there is a priority:
>
> XHTML-MP doctype (overrides default configuration)
> HandheldFriendly meta tag (overrides XHTML-MP doctype)
> MobileOptimized (overrides HandheldFriendly, etc)
> viewport (overrides MobileOptimized etc)
>
> The XHTML-MP doctype would correspond to the following viewport meta
> tag: <meta name="viewport" content="width=device-width,
> height=device-height, initial-scale=1">
>
> The same counts for HandheldFriendly (and MobileOptimized, in the case
> the content attribute is missing or not parseable)
>
> Else <meta name="MobileOptimized" content="320"> would to correspond
> to  <meta name="viewport" content="width=320, initial-scale=1">
>
> Cheers,
> Kenneth
>
> [1] http://thread.gmane.org/gmane.os.opendarwin.webkit.devel/20536
> [2] http://www.w3.org/TR/css-device-adapt/
> [3]
> http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx
>
> --
> Kenneth Rohde Christiansen
> Senior Engineer
> Nokia Mobile Phones, Browser / WebKit team
> Phone  +45 4093 0598 / E-mail kenneth at webkit.org
>
> http://codeposts.blogspot.com ﹆﹆﹆
>