Joe*_*oen 7 iframe mobile extjs viewport
我正在尝试在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的内部没有像它应该的那样缩小时,系统排序有效.任何的想法 ？
我不熟悉 sencha，但 iframe 无法将高度设置为百分比（100%）。因此，如果 sencha 将宽度和高度设置为 100%，它不会垂直扩展，但应水平填充父级。
这是你看到的吗？
尝试手动将 iframe 的高度设置为足够大的尺寸（以 px 为单位）。如果您可以控制 iframe 的内容，那么您可以添加一些 JavaScript 来与父级通信并告诉它适当地调整大小。