1

そのため、Supersizedプラグイン（http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/）を使用して、サイトの背後にある美しい背景画像を表示しています。通常、ブラウザウィンドウのサイズに合わせて拡大されます。iPadでは、ビューポートの端で背景が途切れます。ピンチしてサイト全体を表示し、ズームインすることができます。しかし、背景はそのままです。

私が持っている必要がある最も重要なことは、画像がコンテンツの長さと高さを埋めることです。以下のリンクとCSS：

http://www.xsp.com/new_site/index.php

ここの銃の下で、どんな助けでも大歓迎です。ありがとう。

    /* Supersized styles */
    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

    #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
    #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
    #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/

    #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
    #supersized a { width:100%; height:100%; display:block; }
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10; }
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
    /* Supersized styles end */
4

2 に答える 2

1

私はiPhone/iPadcssメディアクエリでそれを修正する1つの方法を考え出しました。それはおそらく最善の方法ではなく、テープを貼って一緒に保持するようなものです。しかし、それは機能するので、私は幸せです：

/*Fix Supersized on iOS*/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#supersized { margin-left:0;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#supersized { width:110% !important;}
}


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#supersized { margin-left:0; }
}
于 2012-04-13T17:24:36.333 に答える
1

問題は、画像をすべて「max-width：100％」に基づいて設定する一般的なcssにあります。何かがある場合はcssリセットを確認してくださいimg {max-width：100％; }

スーパーサイズのオフィシャルには、ファイル「supersized.3.2.7.js」のソリューションがあります： https ：//github.com/buildinternet/supersized/issues/103

公式の解決策に従って解決できない場合は、これを超大型のcssに追加してみてください。

#supersized img { max-width: none; }

このトリッキーはhttp://blog.valderama.net/node/30によるものです

于 2013-09-15T10:28:54.563 に答える