从WebKit中删除对target-densitydpi的支持

Question

根据这个https://bugs.webkit.org/show_bug.cgi?id=88047,WebKit从viewport params中删除了对target-densitydpi的支持.不幸的是,错误描述既没有表明改变的动机,也没有说明变通方法.

某些想要阻止在移动设备上进行扩展的网页具有以下视口声明:

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

现在,此代码在Chrome中输出错误(使用21.0.1180.49 beta-m进行测试).请使用target-densitydpi = device-dpi建议在没有错误消息的情况下制作网页的假设方法,并保留与之前相同的行为"

Answer 1

我使用这个jQuery在最新的Chrome for Android上实现了同样的目标:

<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');

这会将初始比例视口元标记设置设置为1 CSS Pixel == 1 Device Pixel的正确比例.

您不能使用'width ='+ screen.width,因为screen.width不返回物理像素尺寸.我尝试在Chrome中的Nexus 7上使用http://responsejs.com/labs/dimensions/,所有数字都是视口像素.

Answer 2

webkit-dev邮件列表主题http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html包含功能删除的讨论(或至少背景).

简而言之,WebKit在设备上呈现时有一些缩放页面的方法,这非常令人困惑(因为每个平台都依赖于它自己的方法,所以更是如此.)

更新:

根据上述补丁作者Adam Barth对该主题的评论,

有些人担心target-densitydpi被一些与Android捆绑在一起的应用程序使用,但是人们似乎愿意弃用该功能并将这些应用程序迁移到使用其他机制,例如 响应式图像和CSS设备单元.

如您所见,响应式图像和CSS设备单元似乎是target-densitydpi属性提供的推荐"解决方法" .此外,同一线程上的另一条评论提到了这样一个事实:即使有了这个属性,Web开发人员也必须以另一种方式重新实现同一页面,对于不支持该属性的浏览器环境.

我相信最近推出的子像素布局将成为减轻属性删除问题的另一种方法.

更新2

此博客文章提供了另一种为Android Chrome布局页面的方法.没有任何解决方法可以自动让您"保留页面的相同行为".你只需要重新构建它们一点.