2

- アプリは Sencha touch 2.0 カルーセルを使用します - カルーセル
内の画像はフルスクリーンで表示されます (画面上部のナビゲーション バーを除く)
- アプリは iPad2、iPad2 Retina ディスプレイ、Android xhdpi (タブレット) を対象としています

目標: すべてのターゲット デバイスのカルーセルに全画面画像を表示する

質問: 画像の解像度はいくつですか? カルーセルで 1028x768 の画像を試しました。iPad2 retina では正常に (フルスクリーンで) 表示されますが、Samsung Galaxy Tab 10 では側面に縦線が表示されます。解像度が網膜よりも低いことは理解していますが、ターゲットデバイスの解像度に自動的に縮小して画像をフルスクリーンで表示すると考えましたが、そうではないようです。

これは達成されましたか？もしそうなら、共有してください。

感謝します。

ありがとう。

4

1 に答える 1

1

とった！

画像の解像度はあまり重要ではありません。真実。重要なのは、画像のサイズを自動的に変更して、画像タグが完全な画像を表示するようにすることです。

方法は次
のとおりです。 -高さ (window.innerHeight) と幅 (window.innerWidth) を指定して DIV タグを定義します。
-img タグを、高さ = 100%、幅 = 100% の DIV タグの子要素として配置し

ます。画像の解像度、デバイスの解像度、デバイスの画面サイズに関係なく、画像は常に自動的にサイズ変更され、フルサイズで表示されます。

カルーセルを機能させるための完全なコードは次のとおりです。

カルーセル コード

{
    xtype: 'panel'
    layout: 'fit',
    flex: Ext.os.is.Phone ? 5 : 6,
    items: [
        {
            xtype: 'carousel',
            direction: 'horizontal',
            directionLock: true,
            id: 'ImgId',
            flex: Ext.os.is.Phone ? 5 : 6,
            config: {
                fullscreen: true
            }
        }
    ]
}

カルーセル アイテム コード

Ext.each(images, function (picture) {
    var img = picture.url;
    var bigImg = picture.bigUrl;
    itemsoverlay.push({
        xtype: 'label',
        html: '<div style="width:' 
               + window.innerWidth 
               + 'px;height:' + 'px;"><img src=' 
               + imgURL 
               + ' style="width: 100%;height: 100%;" /></div>'
     });
});

このコードは、タブレットとスマートフォン、iOS または Android で機能します。

HTH

于 2012-11-15T12:46:45.503 に答える