Question

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

由于1500px不适合标准ipad屏幕，我需要根据所使用的设备更改图像的比例。

到目前为止，我正在使用

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

让网站使用平板电脑。

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

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

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

谢谢！

Answer 1

我认为最好的解决方案是制作您的网站responsive，但作为一种快速解决方案，您可以使用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); 
    }
}

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

更多关于media queries for standard devices。

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

1 个答案: