0

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

我一直对如何有条件地加载视网膜图形感到困惑。我需要为具有足够大屏幕以进行幻灯片放映的视网膜设备加载第一组视网膜图形，但如果您在手机上，则不应加载第一组视网膜图形，而第二组视网膜图形应覆盖用于滚动站点的第二组图像。

我正在使用它来触发并用视网膜替换普通图形：

@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)) {

最后一个查询是我尝试仅为电话站点交换视网膜图像。这是行不通的，我尝试过的任何安排都没有奏效。

想法？

谢谢

4

1 回答 1

0

如果您也想根据屏幕分辨率提供不同的图像，我建议为此 eG Retina.js 或 response.js 使用 jQuery 插件。

这样，您只需上传标准分辨率的图像和文件扩展名前带有@2x 的视网膜显示器。（retina.js、response.js 更强大，但需要你做更多的工作）

另外我认为您需要使用不同的媒体查询来解决 iphone 4 问题。

-webkit-min-device-pixel-ratio: 1,5 应该可以解决问题。

于 2013-04-19T09:05:38.983 回答