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

Question

我想在网站上展示一个平板电脑应用程序的演示（针对桌面浏览器）。我为演示选择了分辨率为 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 解决方案...

Answer 1

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