高分辨率移动端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、Mobile Firefox、Opera)。它让开发人员说“这是一个设计合理的网站，而不是特定于桌面的crud”。如果没有它，手机浏览器就会假设你的网站设计了一个未指定的最小宽度，大约在960像素左右。

当我说“像素”时，我指的是"CSS像素“。我们已经确定你的CSS像素是3个物理的“设备像素”。这意味着你设备上的最大尺寸是640个CSS像素。这比960要少得多，所以“桌面”网页-在没有视窗元标签的情况下被假定-将从缩小开始。

Answer 3

`@媒体纯屏幕和(max-device-width: 1920px) { /*定义手机特定样式到这里*/ }

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