1

こんにちは、助けてくれてありがとう、私はここにサイトを作成しました：

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

インデックス ページのスライドショーは、Safari を除くすべてのブラウザで美しく動作しますが、iPhone の Safari でのみ動作します。iPadで見栄えがします。iPhone では、画像がページの左側に押しつぶされます。これを修正する方法がわかりません。インターネットで答えを検索しましたが、運がありません。誰かが助けてくれたら、私はとても感謝しています。ありがとう。

4

1 に答える 1

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に増やしました。これは、他のすべてのブラウザーで 800px に設定されている元のブラウザーよりも狭いですが、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 }
}

明らかに小さすぎるため、幅を 480px 未満に保つよう提案された理由を説明できませんが、幅を大きくするとうまくいきました。

于 2014-01-24T08:04:33.693 に答える