Question

我对媒体查询非常熟悉，但我遇到了严重的问题......！使用适用于Android的最新版Chrome（26.0.1410.58），我发现它会报告与DIP中的视口和设备相关的所有尺寸！

这对我来说似乎完全没错，因为在CSS中逻辑上没有DIP只有CSS像素！

我使用三星Galaxy S（I9000）进行测试。这款手机的屏幕尺寸为480 x 800！ Chrome将window.screen.width报告为320，将window.devicePixelRatio报告为1.5！另一方面，Android（4.2.2）浏览器将屏幕尺寸（正确）报告为480 x 800和相同的devicePixelRatio！

因此，即使涉及媒体查询，Chrome也会使用这些（DIP）值，这会使任何宽度/高度依赖媒体查询无法使用，因为您无法获得真实的（以CSS像素为单位）屏幕尺寸！

即使是使用'min | max-device-width | height'的媒体查询也会对这些（DIP）值做出响应，这些值毫无疑问至少不是它们的用途！

因此，一旦设备像素比率大于1.0，事情就会“错误”，因为获得“真实”值的唯一机会是将报告的值乘以devicePixelRatio（无法用CSS完成）

令我惊讶的是，最新的原生Android浏览器也是基于Webkit引擎的，它可以正确地进行恕我直言。

所以我的问题是：
- 任何人都可以确认Chrome的行为吗？ - 这是故意还是错误？
- 为什么Chrome和Android浏览器的行为有所不同？ - 解决问题的任何可能的解决方案或解决方法？

以下是两个用于快速在线测试的附加链接：
http://responsejs.com/labs/dimensions/
http://cssmediaqueries.com/overview.html

同样有趣的可能是以下文章：
Viewport target-densitydpi support is being deprecated

所以，我们希望尽快支持新的@viewport rule ......！

非常感谢，

冈瑟

Answer 1

这是一个很难解释没有图片的东西，所以对我来说很光鲜。

CSS像素 - 我的理解是CSS像素基本上是逢低 - 或者至少意味着这样对待（即它们考虑像素密度）。

想象一下，将文本大小设置为10px，密度比为1，您将获得10个屏幕px。在密度比为2的屏幕上，您实际上将获得20个屏幕px。虽然这并不等同于相同的尺寸，但它至少应该使它们具有可比性。

现在将此与您的问题联系起来 - 为什么这与媒体查询有关？

请考虑以下事项：

像素密度实际屏幕尺寸媒体查询看到 1 320 x 480 320 x 480 1.5 480×800 320 x 533 2 768 x 1280 384 x 640

要使用媒体查询覆盖所有这些设备，您需要设置~390 CSS px标记的边界。

如果您尝试使用设备宽度进行此操作，则需要大约770像素的边界，这非常接近7英寸平板电脑，我确信线路已经与设备重叠。

Answer 2

浏览器之间存在一致性，您尝试做的事情是可能的，但我认为这将导致严重的问题。

Netsurfer：对我来说，在CSS上下文中使用“与设备无关”的值似乎已经不合逻辑，这完全与特定设备上的显示有关。

这是不正确的，网络设计用于各种设备，而非特定设备或尺寸。

我把这个例子放在一起，说明了以下内容：

基于CSS像素的视口大小（document.documentElement.clientWidth）
显示devicePixelRatio（可在适用于Android和iOS Safari的Chrome上运行 - 尚未在其他浏览器上测试过）
以硬件像素计算设备屏幕尺寸。

http://jsbin.com/icikam/7/edit

var valueTests = [
  {
    name: 'document.documentElement.clientWidth',
    value: document.documentElement.clientWidth
  },
  {
    name: 'window.devicePixelRatio',
    value: window.devicePixelRatio
  },
  {
    name: 'calculated screen width',
    value: Math.floor(window.devicePixelRatio * document.documentElement.clientWidth)
  }
];


var statsTable = document.querySelector('.useful-stats');

for(var i = 0; i < valueTests.length; i++) {
  var row = statsTable.insertRow(i);

  var nameCell=row.insertCell(0);
  var valueCell=row.insertCell(1);
  nameCell.innerHTML=valueTests[i].name;
  valueCell.innerHTML=valueTests[i].value;  
}

我在iPhone 5，iPad mini，iPad 3，Nexus 10，Nexus 7，Nexus 4上进行了测试。

如果我按照CSS像素的顺序放置结果并将其与按设备像素排序的列表进行比较，我会得到以下结果：

https://docs.google.com/spreadsheet/ccc?key=0Ak9A3nqyETcedFduUEVhcmFVcUl2cWRWU201cFlYV3c&usp=sharing

如果您必须选择断点来更改设备的样式，您会发现将它基于CSS Pixels更有意义，因为它大致将移动设备和平板电脑组合在一起。完全基于屏幕像素，您会发现Nexus 4和iPad Mini应该具有相同的UI，这将导致其中一个设备用户获得糟糕的用户体验。

Answer 3

与此同时，我得到了更多的清晰度 “问题”（主要是基于Webkit的浏览器，但也包括Firefox）是（可见的）视口大小是在DIP中测量的（尽管单位也是'px'）而不是CSS像素。

以前在Android上，有人可以通过在元标记中使用'target-densitydpi = device-dpi'来“覆盖”此行为。 Webkit（以及Chrome）已取消对此（专有）选项的支持。

这样做意味着您无法再以设备的分辨率大小显示页面（一旦设备像素比率大于1.0），因为屏幕宽度和高度不再是屏幕像素或CSS像素，而是DIP！

所以问题是“px”在某种情况下意味着什么？毫无疑问，并且符合实际的分区，HTML + CSS中的所有'px'值都必须被视为CSS像素。

那么什么是'CSS像素'？恕我直言CSS像素必须与屏幕像素相同（不是物理/设备像素），因为'px'中的'device-width | height'应该等于屏幕的分辨率而不是等于“任意” “价值观，与任何网站设计者完全”无关“！

但不幸的是，这正是Apple（Webkit）所做的！更糟糕的是，即使使用Javascript的screen.width / height，你也无法获得设备的分辨率，但仍然是DIP中的视口大小。

对我而言，在CSS上下文中使用“设备无关”值似乎已经不合逻辑，这完全与特定设备上的表示有关。那么为什么有人会对“独立于设备”的价值感兴趣呢？

此规则（http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule）处新视口的实际草稿说：“此示例将视口设置为适合设备的宽度。”

以下是示例：@viewport { width: device-width; }

在页面下方'device-width'定义为：“缩放系数为1.0的CSS像素的屏幕宽度。”

根据Apple的方法，这意味着CSS像素等于设备无关像素（DIP）。或者相反，他们可能会争辩说：不，你的屏幕只有一定的宽度（以CSS像素为单位，而不是分辨率）。但是因此宽度描述符有'auto'值。

所以无论哪个方向，最终恕我直言，他们完全错了！

Chrome（适用于Android）媒体查询做错了吗？

3 个答案: