Question

我的网页是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;
    }
}

我的模板不容易显示 - 它有点复杂，但我保证身体有一个宽度为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>

Answer 1

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

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

Answer 2

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

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

好吧。

iPad上的Safari在纵向模式下不适合980px宽度的网站

2 个答案: