Css 高分辨率移动1080px（Xperia Z等）的媒体查询

我正在努力处理不同设备的媒体查询。我已经尝试了我的新索尼Xperia Z手机，由于分辨率高，它以全尺寸的站点格式显示。如何添加媒体查询来重新调整网格大小和格式，就像标准手机秤一样？在Xperia上，字体也太小，无法阅读，需要显示更大的字体。对于像全尺寸显示器一样工作的视网膜设备来说，这是一个问题吗

Xperia Z-分辨率1920×1080，PPI 443

如何包括此类设备的媒体查询？

`@仅媒体屏幕和（最大设备宽度：1920px）{ /*定义特定于移动设备的样式，请点击此处*/ }

---

此代码针对具有相同像素比率的所有设备，这实际上是您所需要的

@media screen and (-webkit-device-pixel-ratio:3) {
    body {font-size: 250%}
}

以下是设备及其设备像素比率的列表：

---

是的，对于“像全尺寸显示器一样工作的视网膜设备”来说，这将是一个问题。它们将违反规定。但是，既然

-webkit设备像素比率
对您有效，这听起来像是由其他原因造成的

您可能忽略了：

在现代的“移动”浏览器中使用。（iOS/Safari、Android/Chrome、移动Firefox、Opera）。它让开发者说“这是一个设计合理的网站，而不是桌面特定的crud”。如果没有它，移动浏览器会假定您的网站设计的最小宽度为960像素左右

当我说“像素”时，我指的是“CSS像素”。我们已经确定，您的CSS像素是侧面的3个物理“设备像素”。这意味着你的设备上最大的尺寸是640个CSS像素。这比960小得多，因此“桌面”网页（假设没有视口元标记）将开始缩小。
@DanielKellaway单击我答案中的单词：）。我插入了我自己的博客文章，但它也应该链接到quirksmode的规范解释。哎呀，它没有。怪癖模式的文章是，我很好奇为什么这已经被标记下来了？一个解释将有助于我们所有人理解这个答案是如何改进的。@timdfriends我没有投票反对这个，但我相信可能有几个原因：1。特定于供应商的
-webkit-
前缀，仅针对webkit浏览器。Opera（不确定它向WebKit的转换是否意味着
-o-
前缀已经过时），Mozilla和Internet Explorer不会成为这一目标，但它们也有移动实现。2.更合适的方法可能是使用
min分辨率：3dppx
（标准方法）而不是
-webkit min设备像素比：3
。我看不出还有什么其他原因导致了它，因为这是一个非常可靠的答案。@timbfriendly对于那些没有dpr的手机，我们会用什么？我有一个LG G2。所有的手机都有一个devicePixelRatio，甚至你的标准桌面电脑浏览器都是“1”。问题是，它是否超过“1”，那么它是什么。您可以通过使用window.devicePixelRatio返回其值来发现这一点。无论该值是什么，这就是媒体查询中应该使用的值。我不知道该值是多少，但如果是“3”，则跨浏览器解决方案将是：-@media-only-screen和（-webkit-min-device-pixel-ratio:3），only-screen和（-o-min-device-pixel-ratio:3/1），only-screen和（min-resolution:423dpi）{…}链接被删除。我认为这一个有相同的信息
@media screen and (-webkit-device-pixel-ratio:3) {
    body {font-size: 250%}
}