css - 高分辨率移动 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对您有用，因此听起来这是由其他原因引起的。

你可能省略了这个：

视口 元标记用于现代“移动”浏览器。（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*/
}`