大型背景图像站点的移动站点

Question

我有一个大图像背景线索生成页面http://minkstock.com

我想让它兼容Mobile，但不想加载我用于桌面和平板电脑网站背景的巨大图像。

哪种方法可以阻止它在手机上加载。

Answer 1

您可以使用css媒体查询。

示例：

// this background will apply only for screen sizes between 320 and 480px
@media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
     background-image: none; // or another image...
}

更多信息： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

正如@devundef建议的那样，您可以利用媒体查询。但是，您的基本实现应该是针对媒体查询的移动体验，以使用完整大小的图像覆盖背景。

Answer 3

@devundef是对的。我们通常从CSS调用背景图像。在这种情况下，CSS3媒体查询就足够了。我还建议遵循这条规则。

可选（如果您不想采用css背景）： 你有没有检查过 Foresight.js 插件？它会检测浏览器以及数据网络：https://github.com/adamdbradley/foresight.js

它根据用户的浏览器和连接类型为您提供自适应图像替换选项。好的是你不必删除你的背景，并且能够保持UI的一致性。