2

我对媒体查询非常熟悉，但我遇到了严重的问题......！使用适用于 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 规则的支持会尽快到来......！

提前谢谢了，

冈瑟

4

3 回答 3

1

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

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

这是不正确的，Web 旨在跨一系列设备工作，而不是特定设备或尺寸。

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

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

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，这将导致其中一种设备的用户获得糟糕的用户体验。

于 2013-06-24T13:30:11.003 回答
1

这是一个没有图片很难解释的事情，所以请耐心等待。

CSS Pixels - 我的理解是 CSS Pixels 本质上是下降 - 或者至少意味着以这种方式对待（即它们考虑到像素密度）。

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

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

考虑以下：

像素密度 实际屏幕尺寸 媒体查询看到 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 英寸平板电脑，我确信该线已经与设备重叠。

于 2013-04-30T09:17:09.703 回答
0

与此同时，我更清楚了。
“问题”（主要是基于 Webkit 的浏览器，但也适用于 Firefox）是（可见）视口大小以 DIP（尽管单位也是 'px'）而不是 CSS 像素来衡量。

以前在 Android 上，有可能通过在元标记中使用“target-densitydpi=device-dpi”来“覆盖”这种行为。Webkit（以及 Chrome）已经移除了对这个（专有）选项的支持。

这样做意味着您不再能够以设备的分辨率大小显示页面（只要设备像素比大于 1.0），因为屏幕宽度和高度等值不再是屏幕像素或 CSS 像素，而是蘸酱！

所以问题是“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; }

页面下方的“设备宽度”定义为：“缩放因子为 1.0 时以 CSS 像素为单位的屏幕宽度”。

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

因此，无论哪种方式，最终恕我直言，他们完全错了！

于 2013-04-30T11:47:51.863 回答