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开发人员也必须以另一种方式重新实现同一页面，对于不支持该属性的浏览器环境。

我相信最近推出的subpixel layout将成为缓解属性删除问题的另一种方法。

更新2

This blog post建议了另一种为Android Chrome布局页面的方法。没有任何解决方法可以自动让您“保留页面的相同行为”。你只需重新构建一下它们。

Answer 3

我不确定，但也许可以通过将viewport metatag中的“width”设置为等于“物理”像素中的屏幕宽度来模拟target-densitydpi。不幸的是，AFAIK，没有100％的方法来获得设备像素宽度，但类似

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

应该适用于大多数Androids（James Pearce: First, Understand Your Screen）。

Answer 4

您是否尝试过添加minimum-scale？不幸的是，我没有安卓手机，所以我无法为你测试。

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

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

4 个答案: