根据浏览器的尺寸调整视口大小

Question

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

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

我尝试使用@-viewportproperty 没有成功...

这是我的非工作代码：

@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