28

根据这个https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit 从视口参数中删除了对 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 保持与以前相同的行为"

4

4 回答 4

18

我使用这个 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 像素 == 1 设备像素的正确比例。

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

于 2013-03-13T22:26:32.297 回答
14

webkit-dev 邮件列表线程http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html包含对功能删除的讨论（或至少是背景）。

简而言之，WebKit 在设备上呈现时有几种缩放页面的方法，这非常令人困惑（考虑到每个平台都依赖于自己的方法来实现这一点，更是如此。）

更新：

根据上述补丁作者 Adam Barth 对上述线程的评论，

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

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

我相信最近引入的亚像素布局将成为缓解属性删除问题的另一种方法。

更新 2

这篇博文提出了另一种为 Android Chrome 布局页面的方法。没有解决方法可以自动让您“保留相同的行为”您的页面。你只需要重新架构它们。

于 2012-11-13T15:54:20.217 回答
3

我不确定，但也许可以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>

应该适用于大多数机器人（James Pearce：首先，了解您的屏幕）。

于 2012-11-16T21:21:55.323 回答
1

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
于 2012-11-16T19:16:28.920 回答