Question

我有一个可在任何现代设备上测试的移动网站。我的视口元标记是：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

问题： 我可以中继视口值（尤其是在width=device-width上）并写入超出device-pixel-ratio值的媒体查询。

代码示例： 我有一个具有不同布局的块，而屏幕宽度较小400px。我可以像这样（1）使用这样的视口media query：

@media all and (max-width: 399px) {
    /* some css code */
}

或者像这样（2）：

@media all and (max-device-width: 399px) {
    /* some css code */
}

或者我必须将 1 或 2 与大部分device-pixel-ratio值（3）结合用于每个媒体查询：

only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 399px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (                min-resolution: 192dpi) and (max-width: 399px),
only screen and (                min-resolution: 2dppx)  and (max-width: 399px) { 
  /*some css code*/
}

第二个问题： 在我看来，字符串width=device-width 必须防止css像素和设备像素之间的差异。最后的陈述是错的吗？

Answer 1

简答：

您可以单独使用max-width或max-device-width个查询。你已经用元标记处理了其余部分。
你的第二个问题不太正确：它与设备像素无关。 width=device-width只是告诉设备使用其默认虚拟像素（CSS像素）测量。
另一个注意事项：复杂媒体查询的最后一个示例仅针对高分辨率设备，这可能不是您在此示例中所需的设备。

<强>解释

我将CSS像素称为虚拟像素，但我认为我们谈论的是同样的事情。

虚拟像素测量是浏览器所说的像素宽度。它直接与CSS像素相关，但可以与设备像素不同。例如，如果我有一个带有标准分辨率显示器的旧iPhone，其虚拟像素宽度为320.（这需要320个CSS像素。）显示器的宽度也有320个实际像素，或者320个设备像素，所以{ {1}}（虚拟像素与设备像素的比率）为1.

如果我升级到具有高分辨率显示器的较新iPhone，它仍然会记录320个虚拟像素，但现在它的宽度为device-pixel-ratio个2或640个实际像素。这就是为什么一切看起来都很清晰 - 同一空间中有更多的像素。

如果我在其中任何一个设备上查看网站，则宽度看起来相同，因为它们具有相同的虚拟像素测量值。对我的CSS来说，它们都是320像素宽。这非常简单，直到某些移动浏览器允许我们捏合和缩放以调整网页大小。 此调整大小会更改虚拟像素宽度。

有些移动浏览器实际上会自动调整大小。因此，如果我要访问手机浏览器上具有固定1000px宽度的网站，我的手机浏览器可能会尝试在可视窗口中调整网站的整个宽度，这将使我的虚拟像素达到1000而不是320我正在查看该网站非常非常小的版本。这对于响应式网站来说是一个问题，因为如果我的手机显示它有1000个虚拟像素，它会激活我的1000px媒体查询而不是正确的320px查询。

device-pixel-ratio和width=device-width禁用此自动调整大小，因此您知道如果浏览器的本机虚拟宽度为320，那么这就是初始加载时的结果。

initial-scale=1禁用用户手动捏合和缩放的功能。这对某些用户来说可能很烦人，但它可以让您更好地控制最终的观看体验。

minimum-scale=1, maximum-scale=1, user-scalable=no用于衡量设备的分辨率。它通常用于向高分辨率设备提供高分辨率图像，因为普通分辨率图像在高分辨率设备上看起来可能模糊。通常人们会测试device-pixel-ratio是否等于或高于1.5或2来确定高分辨率设备。

我可以使用max-device-width和设备宽度而不使用设备像素比吗？

1 个答案: