可能是这方面专家的一个基本问题
例子:
我有一张 2000x1500px @ 556kb 的图片——我猜是由于缓存级别的缘故,一组这样大小的图片会导致 iOS 设备无法加载页面(考虑到有很多图片)。
如果我创建两个相同的文件,一个为 2000x1500,另一个为 800x450,并且由于尺寸较小而重量更轻 - 这将仅适用于移动设备。
我将如何在 CSS 中解决这个问题,或者任何正确的方法来解决这个问题?
最佳答案
如果您可以确定用于移动设备/平板电脑/台式机/无关情况的图像尺寸,那么您可以使用 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?
关于android - 查询以设置要使用的图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30068457/