Ipad 视口纵向问题答案

【问题标题】：Ipad viewport portrait issueIpad 视口纵向问题
【发布时间】：2016-04-26 07:15:38
【问题描述】：

我有一个网页出现在 ipad 上。我的正文网页的宽度为 960 像素，高度可变。

我为视口添加了这个元数据：

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

我想在屏幕上看到 100% 的网页。它在横向上运行良好，但我无法找到如何修改我的视口以查看 100% 的横向和纵向网页。

目前我看到网页宽度的 60% 是纵向的。

我不想添加 JS 脚本或媒体查询。我的网页没有响应。

【问题讨论】：

【解决方案1】：

您有一个静态宽度，而 iPad 在纵向模式下的宽度较小。在不调整静态宽度的情况下解决这个问题是不可能的。也许您仍然应该考虑 JS 或媒体查询。这是一个提供有关尺寸的更多信息的网站：http://www.websitedimensions.com/

【讨论】：

【解决方案2】：

我通过使用这段代码达到了我的目标：

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
    body {
    width: 768px;
    }
}

显然它是 Ipad 的特定代码，但它也适用于 Nexus 9.0 和 Surface。

如果有人有 JS 脚本来做同样的事情，我有兴趣检查一下。

【讨论】：