根据屏幕尺寸加载各种视网膜图形集

Question

我的设置是我有几个版本的网站。在较大的屏幕上有一个幻灯片放映，在手机和其他较小的屏幕上只有一个卷动站点。这两个版本的网站加载不同的图形。

我一直在困惑如何有条件地加载视网膜图形。我需要为视网膜设备加载第一组视网膜设备，这些设备的屏幕尺寸足以用于幻灯片播放，但如果您使用的是手机，则不应加载第一组视频，而第二组视网膜图形应覆盖第二组图像用于滚动网站。

我用这个来触发，并与视网膜取代正常的图形：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

这是我的媒体查询的开始并替换为图像与桌面版网站。然后，我有几节专门调整布局：

@media all and (min-width: 1024px) and (max-width: 1099px){ 

@media all and (min-width: 768px) and (max-width: 1023px) { 

@media all and (max-width: 767px) { 
// This query is for the small phone sized layout. 

@media all and (max-width: 767px) and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) { 

这最后的查询是我尝试换视网膜图像只针对手机网站。这不起作用，没有我试过的安排工作。

想法？

谢谢

Answer 1

我建议使用一个jQuery插件这个e.G. retina.js或response.js，如果你想提供基于屏幕分辨率的不同图像。

这样，您只需在文件扩展名之前以标准分辨率上传图像并使用@ 2x上传视频显示。 （retina.js，response.js功能更强大，但需要更多的工作在你身边）

此外，我认为你需要解决iphone 4与不同的媒体查询。

-webkit-min-device-pixel-ratio：1,5应该可以做到。