我可以使用最大设备宽度和设备宽度而不使用设备像素比率吗？

Question

我有一个移动网站，可以测试任何现代设备。我视meta标签是：

<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。 我可以用这样的视media query像这样（1）使用方法：

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

或像这样（2）：

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

或者我必须结合或有很大一部分每个媒体查询的值（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查询孤单。你已经用meta标签处理了其余的问题。
• 你的第二个问题不太对：它并不涉及设备像素。 width=device-width只是告诉设备使用其默认虚拟像素（CSS像素）的测量。
• 另一个注意事项：复杂媒体查询的最后一个例子将只针对高分辨率设备，这可能不是你想要的这个例子。

说明：

我要去参考CSS像素为虚拟像素，但我认为我们在谈论同样的事情。

虚拟像素测量是浏览器所说的像素宽度。它直接与CSS像素相关，但可能与设备像素不同。例如，如果我有一台带有标准分辨率显示器的旧iPhone，其虚拟像素宽度为320.（这占用了320个CSS像素）。此显示器的宽度上也有320个实际像素，或320个设备像素，因此device-pixel-ratio （虚拟像素与设备像素的比例）为1.

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

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

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

width=device-width和initial-scale=1禁用此自动调整大小，因此您知道，如果浏览器的本机虚拟宽度为320，那么您将在初始加载时获得该值。

minimum-scale=1, maximum-scale=1, user-scalable=no禁用用户捏手和缩放的能力。这对某些用户来说可能很烦人，但它可以让您更好地控制最终的观看体验。

device-pixel-ratio用于测量设备的分辨率。它通常用于向高分辨率设备提供高分辨率图像，因为普通分辨率图像在高分辨率设备上看起来很模糊。通常人们测试以确定device-pixel-ratio是等于还是高于1.5或2以确定高分辨率设备。