<meta> 基于设备的不同视口缩放？

Question

我有一个静态宽度为1500px的网站。我想在浏览器/平板电脑/手机上显示完全相同的图像。

因为1500px不适合标准的ipad屏幕，我需要根据使用的设备改变图像的比例。

目前我用的是

<meta name="viewport" content="minimum-scale=.7, maximum-scale=.7" />

让网站在平板电脑上工作

我知道你可以通过javascript在运行时改变视口值，但我希望在使用屏幕较小的设备时，页面以正确的缩放级别开始。

我正在考虑为每个设备使用不同的html页面(带有重定向)。

但也许有更好/更简单的方法来做到这一点?

谢谢!

Answer 1

我认为最好的解决方案是让你的网站响应，但作为一个快速的解决方案，你可以使用transform: scale(0.7);和媒体查询来缩小整个页面，像这样:

@media only screen and (max-width: 1024px) {
    body {
        -webkit-transform: scale(0.7); 
        -moz-transform: scale(0.7); 
        -ms-transform: scale(0.7); 
        -o-transform: scale(0.7); 
        transform: scale(0.7); 
    }
}

您可以根据您的具体需要调整值。

更多关于标准设备的媒体查询。