jquery - 如何跨移动设备提供图像

Question

我正在为移动设备开发一个网页，包括智能手机和平板电脑。

我正在使用 jQueryMobile，因此大多数功能在所有设备上都运行良好。

我的问题是，我想使用非常高分辨率的图像，以便使用平板电脑获得最佳质量。如果我使用 720X1280 - 该页面在平板电脑上看起来很棒 - 但在智能手机上 - 不会发生缩小。

我是否必须使用 320x480 构建 - 然后缩放将在平板电脑上发生？有没有什么灵魂或指导方针？

score 5 · Accepted Answer

使用响应式图像。这样该图像将根据设备的大小进行缩放。

img {
  width: 100%;
  max-width: 100%;
}

上面的 css 代码会自动取父容器的大小。

这里有一些很好的例子和文章。

自适应图像的 Javascript 插件：

灵活图像的好教程：

1 回答 1