android - 查询以设置要使用的图像大小

Question

可能是这方面专家的一个基本问题

例子:

我有一张 2000x1500px @ 556kb 的图片——我猜是由于缓存级别的缘故，一组这样大小的图片会导致 iOS 设备无法加载页面(考虑到有很多图片)。

如果我创建两个相同的文件，一个为 2000x1500，另一个为 800x450，并且由于尺寸较小而重量更轻 - 这将仅适用于移动设备。

我将如何在 CSS 中解决这个问题，或者任何正确的方法来解决这个问题？

Answer 1

如果您可以确定用于移动设备/平板电脑/台式机/无关情况的图像尺寸，那么您可以使用 javascript 或 CSS 媒体查询来完成动态替换图像。

例如，假设您知道所有移动设备都会在窗口宽度为 768px 时触发，并且可以安全地假设小于 500kb 的图像大小对所有这些设备都适用，那么 CSS 就是您的解决方案:

HTML

<img class="mobile_image" src="mobile_image.png" alt="Mobile Image"/>
<img class="desktop_image" src="desktop_image.png" alt="Desktop Image"/>

CSS

@media (max-width: 768px) {
    .desktop_image { display: none; }
    .mobile_image { display: block; }
}

备注:Media Queries for standard devices

如果您需要更复杂的东西，由于要识别目标设备，您还可以将上述 CSS 与 Javascript 结合起来进行图像检测。

看这里:What is the best way to detect a mobile device in jQuery?