Question

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

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

我尝试使用@-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解决方案...

Answer 1

我认为你应该使用媒体查询：Logic in Media Queries

将视口大小调整为浏览器的尺寸

1 个答案: