Search code examples
google-chromewebkit

Support for target-densitydpi is removed from WebKit


According to this https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit dropped the support for target-densitydpi from viewport params. Unfortunately, the bug description states neither the motivation for the change, nor the workaround.

Certain web-pages that wanted to prevent scaling on mobile devices had the following declaration of the viewport:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, 
user-scalable=no, target-densitydpi=device-dpi"/>

Now this code outputs an error in Chrome (tested with 21.0.1180.49 beta-m). Please advice what is the supposed way to make a web-page without the error messages and retain the same behavior as before with target-densitydpi=device-dpi"


Solution

  • The webkit-dev mailing list thread http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html contains a discussion (or at least the background) of the feature removal.

    In short, WebKit had a few means of scaling the page when rendered on a device, and this was highly confusing (even more so given that each platform relied on its own approach to this.)

    UPDATE:

    According to a comment on the said thread by Adam Barth, the mentioned patch author,

    There's some concern that target-densitydpi is used by some apps that are bundled with Android, but folks appear willing to deprecate the feature and to migrate those apps to using other mechanisms, such as responsive images and CSS device units.

    As you can see, responsive images and CSS device units appear to be the recommended "workarounds" for what the target-densitydpi attribute provided. Also, another comment on the same thread mentioned the fact that even with this attribute in place, web developers would have to reimplement the same page in another way, for browser environments that do not support the attribute.

    I believe the recently introduced subpixel layout will become another means of mitigating the attribute removal issue.

    UPDATE 2

    This blog post suggests an alternative way to laying out your page for Android Chrome. There is NO workaround that will automagically let you "retain the same behavior" of your pages. You just have to re-architecture them a bit.