轮播代码

Question

-App使用Sencha touch 2.0轮播
- 旋转木马中的图像全屏显示（减去屏幕顶部的导航栏）
-App针对iPad2，iPad2 Retina显示屏，Android xhdpi（平板电脑）

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

问题：图像的分辨率应该是多少？我在旋转木马上尝试过1028x768图像。在iPad2视网膜上显示精细（全屏）但在三星galaxy Tab 10上我看到两侧的垂直条纹。我知道分辨率低于视网膜，但我认为它会自动缩小到目标设备的分辨率并全屏显示图像，但显然它不是这样做的。

这是否已实现，如果是，请分享。

欣赏它。

感谢。

Answer 1

知道了！

图像的分辨率并不重要！真正。重要的是通过自动调整图像大小来确保图像标记显示完整的图像。

方法如下：
- 定义具有指定高度（window.innerHeight）和宽度（window.innerWidth）的DIV标签。
- 将img标记作为DIV标记的子元素，高度= 100％，宽度= 100％

无论图像的分辨率，设备的分辨率，设备的屏幕尺寸如何，图像都将自动调整大小并以完整尺寸显示。

使旋转木马工作的完整代码在这里：

轮播代码

{
    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

Sencha touch 2.0旋转木马，图像分辨率

1 个答案:

轮播代码

轮播项目代码