Support for target-densitydpi is removed from WebKit

Question

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"

Answer 1

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.

Answer 2

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.

Answer 3

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).

Answer 4

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"/>