0

我正在优化一个网络应用程序以在 iPad 肖像模式下工作。该网络应用程序构建为宽度为 350 像素的 iFrame。

我使用以下元视口标签:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=350" />

我希望它的行为如下:
- 我的可见视口的宽度将为 350 像素。
- 我的 Web 应用程序最初是按其原始大小缩放的,这意味着 350px iFrame 将在 350px 视口中完全呈现(可见视口的边界处没有空白。

但是,iPad Portrait 模式似乎忽略了 width=350 属性并将页面呈现为 width=device-width。

有人可以解释为什么会发生这种情况以及我必须如何解释这种行为吗?

4

2 回答 2

3

在 iOS 中,iframe 会忽略所有视口设置并呈现为设备默认值。很烦人。

请参阅 - iOS Safari 扩展的框架集大于视口

于 2012-08-07T13:18:47.950 回答
0

在我们的例子中,iPad 上的视口大小等于第一次渲染的内容。因此,如果您将主容器扩展到页面的整个宽度,iPad 会说“该 iframed 页面的视口与 devide-width 相同”。在我们的案例中,解决方案是使用width,heightstyle属性来设置 iframe 的严格大小。然后简单地应用overflow: hidden在主容器上。

于 2015-05-15T09:37:11.977 回答