iPad 上的 Safari 不适合纵向模式下 980 像素宽的网站

Safari on iPad Does Not Fit 980px Width Site in Portrait Mode

本文关键字：像素 网站 模式 Safari 上的 不适合 iPad      更新时间：2023-09-26

我的网页是980px。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>

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

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

我一直在

我正在处理的固定宽度网站上玩这个：

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

似乎还可以。

相关文章：