Support for target-densitydpi is removed from WebKit

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.

I'm not sure, but maybe it's possible to emulate target-densitydpi by setting "width" in viewport metatag to be equal to screen width in "physical" pixels. Unfortunately, AFAIK, there is no 100% way to get device pixel width, but something like

<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>
if(navigator.userAgent.toLowerCase().indexOf('android') > -1)
    document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
</script>

should work on most Androids (James Pearce: First, Understand Your Screen).

Have you tried adding minimum-scale? Unfortunately, I don't have an android phone, so I can't test it for you.

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

I achieved the same thing on the latest Chrome for Android using this jQuery:

<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>

var viewPortScale = 1 / window.devicePixelRatio;

$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');

This sets the initial-scale viewport meta tag setting to the correct scale for 1 CSS Pixel == 1 Device Pixel.

You can't use 'width='+screen.width because screen.width doesn't return the physical pixel dimensions. I tried using http://responsejs.com/labs/dimensions/ on my Nexus 7 in Chrome and all the numbers are viewport pixels.