我正在尝试在 Sencha 中创建一个显示 iframe 的 Carrousel。基本思想是我已经配置了一堆 HTML 文件，可以在 iPad 上查看。所以文件有一个视口(viewport)和所有配置。我创建了一个像这样的简单旋转木马:
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>
系统有点工作，除了视口(viewport)不被尊重并且 iframe 的内部没有像它应该的那样被缩小。任何的想法 ？
最佳答案
我不熟悉 sencha，但 iframe 无法将高度设置为百分比(100%)。因此，如果 sencha 将宽度和高度设置为 100%，它不会垂直扩展，而是应该水平填充父级。
这是你看到的吗？
尝试手动将 iframe 的高度设置为足够大的像素大小。如果您可以控制 iframe 的内容，那么您可以添加一些 javascript 来与父级通信并告诉它适本地调整大小。
关于iframe - 在 iFrame 内调整视口(viewport)大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6143740/