使用css和@media测试视网膜图像

我想知道如何在常规浏览器上测试一些视网膜图像的CSS？我也试过我以前的代码而不是下面的代码，并想知道它是否工作？使用css和@media测试视网膜图像

很难判断正确的图像是否加载，因为这是相同的图像质量更好。

//retina stuff 
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
    #home { 
      background: url('bg-home-x2.png') no-repeat; 
} 

.shelf { 
    background: url('shelf-x2.png') no-repeat top center; 
    height: 111px; 
    padding-bottom: 0px; 
} 

#pantry { 
    background: url('bg-pantry-x2.png') no-repeat; 
    width: 320px; 
    height: 480px; 
    z-index: -1; 
} 

#list { 
    background: url('bg-cart-x2.png') no-repeat; 
    width: 320px; 
    height: 480px; 
    z-index: -1; 
    margin-top: -6px; 
} 
}

来源

2013-05-10 Blynn

定期浏览器是什么意思？你的意思是在浏览器中测试移动媒体查询吗？ – nickhar 2013-05-11 00:40:36

是的，以及如何测试.. -webkit-min-device-pixel-ratio：1.5 – Blynn 2013-05-11 02:43:08

默认情况下，您无法在网络浏览器中使用-min-device-pixel-ratio - 由于大多数计算机/ PC没有所需的像素比值来测试它（不包括较新的高端笔记本电脑/显示器）。

最好的方法是使用您定位的设备或设备系列，但在没有它们的情况下，唯一的方法是通过仿真来测试媒体查询，可能有以下帮助：

使用Opera Mobile Emulator。这使您可以为普通设备设置各种测试环境。它还允许你定义自定义设置的分辨率和像素密度：

这是适用于Windows，Mac和Linux。
还有一个基于Javascript的Web Retina Emulator，但这不会解析CSS媒体查询，所以它只是简单地检查图像的有效性/完整性。
如果您正在模拟特定的iOS设备，那么您可以使用iOS simulator（Xcode工具的一部分）来测试视网膜显示器 - 但这听起来并不适用，并且在测试本机应用程序时使用得更广泛。

来源

2013-05-11 12:22:08 nickhar

谢谢这可能有助于排除视网膜像素。 – Blynn 2013-05-11 17:20:19

也许最简单的方式就是您的开发机器上启动一个基本的服务器（即在命令行Python的Web服务器），然后查看该网站的Retina设备上观看的服务器日志，看看哪些文件遍历。

来源

2013-05-10 15:09:30

实际上，你可以使用Firefox：

进入 “about：config中”
查找“layout.css.devPixelsPerPx
将其更改为您所需的比率（1正常， 2为视网膜等）

刷新您的网页 - 繁荣，您的媒体查询现在已经踢了！帽子关闭到火狐为web开发真棒！

这是在Windows 7上用Firefox 21.0完成的。

来源

2013-06-21 05:08:21 andrewb

非常有趣我会试试这个。 – Blynn 2013-06-21 13:28:13

不错！它也适用于Firefox 12.04和Firefox 23. – jalogar 2013-09-18 10:14:33

@Blynn你最终获得了这个成功吗？ – andrewb 2013-11-20 22:24:47

使用css和@media测试视网膜图像

回答

相关问题