在纵向和横向模式下为 iPhone/iPad 画廊自动调整图像大小

Question

我必须为 iPhone 和 iPad 优化一个小型网站。由于媒体查询，我使用了两个 css 文件，一个用于 iPhone 纵向和横向模式，另一个用于 iPad 纵向和横向 + 所有其他文件。网站上有一个图片库，我希望图像使用最大可用区域，具体取决于它们所显示的设备以及方向模式。

我最终在同一页面上使用了 4 个 nivo 滑块，其中我使用 css (display:none) 隐藏了 4 个中的 3 个。图片由 TimThumb 调整大小。这绝对是一个糟糕的解决方案（例如，所有 4 个 nivo 滑块都在加载并在 iPhone 上运行，即使只显示一个），我想知道这个问题是否还有其他解决方案？

Answer 1

我在 ipad 应用上遇到了类似的问题，我只是使用了这个：

img.homepg { 宽度：920px; } @media screen and (max-width:910px) {

img.homepg { 
    width:670px;  } } img { 
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; }

.homepg 是 img 类，920 是最大图像宽度，910 是触发图像调整大小的最大屏幕宽度（也就是当方向改变时），670 是最小 img 宽度！