0

我想在网站上展示一个平板电脑应用程序的演示(针对桌面浏览器)。我为演示选择了分辨率为 1024x768 的 iPad 2。添加一个 iPad 透明图形封面,演示最终尺寸为 1210x1315px。

在这样的分辨率下,大多数屏幕都会太小而无法正常显示演示。我不想手动调整所有设计的大小,或者在transform不知道相关比例的情况下使用 CSS。因此,我正在寻找一种根据可用显示分辨率自动调整设计大小的方法。

我尝试使用该@-viewport属性但没有成功...

这是我的非工作代码:

@media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */
    @-viewport{
        height:1400px; /* ... then, let's pretend it's 1400px high*/
    }
}

我也试过这个:

<meta name="viewport" content="height=1400, initial-scale=1" />

编辑:jQuery 解决方法:

function resize(){
    var documentHeight = $(document).innerHeight();
    var targetedHeight = 1500;
    if (documentHeight < targetedHeight){
        var ratio = documentHeight / targetedHeight;
        $('#container').css('transform','scale('+ratio+')');
        $('#container').css('-webkit-transform','scale('+ratio+')');
        $('#container').css('-moz-transform','scale('+ratio+')');
        $('#container').css('-ms-transform','scale('+ratio+')');
        $('#container').css('-o-transform','scale('+ratio+')');
    }
}

这就是我最终为达到预期结果所做的事情。我更喜欢纯 CSS 解决方案...

4

1 回答 1

0

我认为您应该使用媒体查询:媒体查询中的逻辑

于 2013-10-24T19:42:28.830 回答