2

-App 使用 Sencha touch 2.0 carousel -carousel
中的图像全屏显示（减去屏幕顶部的导航栏）
-App 针对 iPad2、iPad2 Retina 显示屏、Android xhdpi（平板电脑）

目标：在所有目标设备的轮播中显示全屏图像

问题：图像的分辨率应该是多少？我在轮播中尝试了 1028x768 图像。在 iPad2 视网膜上显示良好（全屏），但在三星 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。

高温高压

于 2012-11-15T12:46:45.503 回答