jquery - jQuery Cycle2 幻灯片在 iPhone 上的 Safari 中向左挤压

Question

您好，感谢您的帮助，我在这里创建了一个站点：

http://www.furniturebymartin.co.uk/index.html

索引页面上的幻灯片在除 Safari 之外的所有浏览器上都能很好地工作，但仅限于 iPhone 上的 Safari。在 iPad 上看起来很棒。在 iPhone 上，它将图像压缩到页面的左侧。我不知道如何解决这个问题。我已经在互联网上搜索了答案，但没有运气。如果有人可以提供帮助，我将不胜感激。谢谢。

Answer 1

我自己真的解决了！再次！

因此，我将 index.html 页面上的 html 代码中的标记设置为

align="centre"

这将幻灯片设置到页面的中间，尽管它仍然被压扁。

在 Cycle2 的建议下添加了样式表 (styleMAIN.css) 上的一个部分，如下所示：

/* media queries some style overrides to make things more pleasant on mobile devices */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   .cycle-slideshow { width: 480px;}
   .cycle-slideshow img { width: 100%; height: auto }
   .cycle-overlay { padding: 4px }
   .cycle-caption { bottom: 4px; right: 4px }
}

iPhone Safari 中 480px 的宽度设置太小了，所以我把它增加到了 720px。这仍然比原始版本更窄，原始版本为所有其他浏览器设置为 800 像素，但大到足以在 iPhone 上正常工作。新的 CSS 代码如下所示：

/* media queries some style overrides to make things more pleasant on mobile devices */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   .cycle-slideshow { width: 720px;}
   .cycle-slideshow img { width: 100%; height: auto }
   .cycle-overlay { padding: 4px }
   .cycle-caption { bottom: 4px; right: 4px }
}

我无法解释为什么建议将宽度保持在 480 像素以下，因为它显然太小了，但增加它是有效的。