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

Question

我正试图掌握不同设备的媒体查询。由于分辨率高，我尝试过我的新索尼Xperia Z手机并以全尺寸网站格式显示。如何添加媒体查询以重新调整网格大小和格式，如标准移动规模？在Xperia上，字体也太小而无法读取，需要显示更大。对于像全尺寸显示器显示器一样的视网膜设备，这是一个问题吗？

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

如何为此类设备添加媒体查询？

Answer 1

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

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

以下是设备列表及其设备像素比： https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o

Answer 2

是的，对于“像全尺寸显示器显示器一样工作的视网膜设备”，这将是一个问题。他们会违反CSS。但由于-webkit-device-pixel-ratio适合你，听起来这是由其他原因造成的。

您可能省略了this：

  

viewport meta tag用于现代“移动”浏览器。 （iOS / Safari，Android / Chrome，移动Firefox，Opera）。它让开发人员说“这是一个设计合理的网站，而不是桌面特定的网站”。没有它，移动浏览器会假设您的网站设计有未指定的最小宽度，大约960像素。

当我说“像素”时，我的意思是“CSS像素”。我们已经确定你的CSS像素是一侧的3个物理“设备像素”。这意味着您设备上的最大尺寸可达640 CSS像素。这远远少于960，因此“桌面”网页 - 假设没有视口元标记 - 将开始缩小。

Answer 3

`@media only screen and（max-device-width：1920px）{     / *定义移动特定样式来到这里* /     }

@media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`