我试图去与不同的设备媒体查询交手。 我曾尝试在全量程网站格式我的新索尼XPERIAž手机和显示器由于高分辨率。 如何添加媒体查询重新大小的网格和格式像一个标准的手机的规模？ 上了Xperia的字体也太小，无法阅读，需要更大的展示。 这对于像全尺寸的显示器上会显示视网膜设备出了问题？
的Xperia Z ^ - 1920×1080分辨率，443 PPI
如何包括此类设备的媒体查询？
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对你的作品，听起来好像这是由别的东西造成的。
你可能忽略此 ：
该视 meta标签在现代的“移动”的浏览器使用。 （的iOS / Safari浏览器的Android / Chrome浏览器，移动设备Firefox，Opera）的。 它让开发者说：“这是一个正确设计的网站，而不是台式机专用污物”。 没有它，手机浏览器假设你的网站设计有一个未指定的最小宽度，地方约960个像素。
当我说“像素”，我的意思是“CSS像素”。 我们已经建立了你的CSS像素3物理“设备像素”上的一侧。 这意味着您的设备上的最大尺寸的作品已在640个CSS像素。 这是少得多960，这样的“桌面”的网页 - 这是假设在没有视meta标签的 - 将开始缩小。
Answer 3:
`@media只有屏幕和（MAX-设备宽度：1920px）{/ *定义移动特定样式来这里* /}
@media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`
文章来源: Media query for high resolution mobile 1080px (Xperia Z etc)
