在 iFrame 内调整视口大小答案

【问题标题】：Viewport resizing within an iFrame在 iFrame 内调整视口大小
【发布时间】：2011-09-02 21:04:42
【问题描述】：

我正在尝试在 Sencha 中创建一个显示 iframe 的 Carrousel。
基本想法是我已经配置了一堆 HTML 文件，可以在 iPad 上查看。
所以这些文件有一个视口以及所有配置。

我创建了一个像这样的简单旋转木马：

var rootPanel;
Ext.setup({
    onReady: function() {
        rootPanel = new Ext.Carousel({
            fullscreen: true,
            layout: 'card',
            items: [
                { html: '<iframe src="http://localhost/file1.html">' },
                { html: '<iframe src="http://localhost/file2.html">' },
                { html: '<iframe src="http://localhost/file3.html">' },
            ]
        });
    }
});

HTML 文件本身如下所示：

<!DOCTYPE html>
  <html>
    <head>
        <title>Untitled Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=1.0;user-scalable=no">
    </head>
    <body>
        <div id="container">
            <div style="margin:0;padding:0;position:absolute;left:0px;top:0px;width: 1536px; height: 2048px;text-align:left;z-index:0;">
                <img src="image.jpg" style="width: 1536px; height: 2048px;"></div>
        </div>  
    </body>
</html>

系统工作，除了视口不被尊重和 iframe 的内部没有像它应该的那样缩小。有什么想法吗？

【问题讨论】：

请标记为已回答。这将在所有未回答问题的搜索中弹出。

标签： iframe mobile extjs viewport

【解决方案1】：

我不熟悉 sencha，但 iframe 无法将高度设置为百分比 (100%)。因此，如果 sencha 将宽度和高度设置为 100%，它不会垂直扩展，而是应该水平填充父级。

这是你看到的吗？

尝试手动将 iframe 的高度设置为足够大的像素大小。如果您可以控制 iframe 的内容，那么您可以添加一些 javascript 来与父级通信并告诉它适当地调整大小。

【讨论】：

【解决方案2】：

在 iframe 和内部 html 上设置 100%

var rootPanel;
Ext.setup({
    onReady: function() {
        rootPanel = new Ext.Carousel({
            fullscreen: true,
            layout: 'card',
            cls: 'some-cards',
            items: [
                { html: '<iframe width="100%" height="100%" src="http://localhost/file1.html">' },
                { html: '<iframe width="100%" height="100%" src="http://localhost/file2.html">' },
                { html: '<iframe width="100%" height="100%" src="http://localhost/file3.html">' },
             ]
        });
    }
});

你的 css 是链接这样的东西。

.some-cards .x-innerhtml {
    height: 100%;
}

【讨论】：