0

我的网页是 980 像素。iPad 上的 Safari 不适合纵向模式。

根据 Apple 的说法，您无需做任何事情来使您的网站适合 iPad 上的所有方向。但是在纵向模式下，我的网页根本不适合。它大约是视口的 20%。

我尝试了所有可用的修复程序均未成功：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

或者 

<meta name="viewport" content="width=980">

和

<style type="text/css">
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    body, #wrap{
        width:980px;
    }
}

我的模板不容易展示——它有点复杂，但我向你保证，body 有一个宽度为：980px 的包装器。其他隐藏元素也以 100% 的宽度添加到包装器旁边。但它们不太可能引起问题。

有什么想法可以尝试吗？有什么防弹方法吗？我没主意了。

这是文本案例代码：

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=980, initial-scale=1, maximum-scale=1"><style type="text/css">body{background-color:grey;}#wrap{width:980px;background-color:red;margin:0 auto;}</style></head><body> <div id="wrap">My content does not fit!</div></body></html>
4

2 回答 2

1

查看您的视口设置。在纵向模式下，iPad 的宽度为 768 像素。通过设置initial-scale=1，iPad 会自动缩放到 768px。通过设置maximum-scale=1，iPad 将无法像您想要的那样缩小到 980 像素。当然不适合！

现在尝试根本不设置视口！iPad 将以网站宽度的 100% 呈现页面，而不是 iPad 的宽度，我猜这就是你想要的。

于 2012-06-19T17:39:55.283 回答
1

我一直在我正在研究的一个固定宽度的网站上玩这个：

<meta name="viewport" content="width=device-width, initial-scale=-100%" />

似乎还可以。

于 2013-12-17T14:18:39.570 回答