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