css - 高分辨率移动设备 1080px 的媒体查询(Xperia Z 等)

Question

我正在努力掌握针对不同设备的媒体查询。由于高分辨率，我已经试用了我的新 Sony Xperia Z 手机并以全尺寸网站格式显示。如何添加媒体查询以像标准手机秤一样调整网格大小和格式？在 Xperia 上，字体也太小难以阅读，需要显示得更大一些。对于像全尺寸显示器显示器一样工作的 Retina 设备来说，这是一个问题吗？

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