Viewport target-densitydpi support is being deprecated
Support for target-densitydpi in the viewport meta tag was recently removed from WebKit and with Chrome for Android moving forward to current revisions on WebKit, this change is now rolling out in Android. This change affects only a small number of sites because of the limited implementation of the target-densitydpi attribute. It brings Chrome and other WebKit based browsers in compliance with the specification and matches the behavior of other modern mobile browsers.
In order to to best understand what’s changed, you need to remember that a device pixel is not the same as a CSS pixel (see CSS Pixels), and that high DPI displays are able to create crisper and sharper images by fitting more device pixels into a smaller space. This means that in order for content to appear at a normal size, the browser treats each CSS pixel as multiple device pixels and the browser scaled up assets and images to fit within the correct number of CSS pixels.
In Android browser and early versions of Chrome for Android, developers could use target-densitydpi=device-dpi viewport value to force the browser to make a CSS pixel the same size as a device pixel, which may cause content to appear incorrectly scaled on screen (as seen in figure 1).
An Easy, Quick Fix #
In most cases, if your site is affected by this change you can fix it easily by serving the same mark-up (including viewport) to Chrome for Android as you serve to mobile Safari (which never supported target-densitydpi).
Best Practices for Modern Mobile Web Sites #
When designing a new mobile site, or updating existing pages, you should use modern techniques for dealing with high DPI displays; including always using <meta name="viewport" content="width=device-width"> and a flexible layout for mobile sites. Remember, device sizes, orientations and pixel ratios vary which means that your site may be displayed on a screen ranging from 320 to over 600 CSS pixels wide.
For more information about best practices for building websites that work well on high DPI displays, check out Reda Lemeden’s Towards a Rentina Web article on Smashing Magazine.
One Other Little Note #
While writing up this post, I accidentally did a search for sites that used target-density instead of target-densitydpi and I came across quite a few of them. If you’re using target-density (without the dpi at the end), you can just remove it, it wasn’t doing anything!