示例页面源:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
问题是，移动 safari 忽略了来自 IFrames 内联样式的 height 200px:
我还想通过 vanilla JavaScript 动态更改 IFrame 的高度，这对以下代码根本不起作用:
document.getElementsByTagName('iframe')[0].style.height = "100px"
height 样式的值已根据开发工具正确更改，但由于 IFrame 的实际呈现高度未更改，因此被简单地忽略了。
这似乎只是移动 Safari 中的一个问题，并且在最新版本的桌面 Safari、Firefox、Chrome、Androids WebView 等上按预期工作。
测试页:http://devpublic.blob.core.windows.net/scriptstest/index.html
附注:我在 browserstack 上用各种设备测试了它，并且还在那里截取了屏幕截图，因为我手头没有任何实际的 iDevice。
最佳答案
看起来像这样:How to get an IFrame to be responsive in iOS Safari?
iFrame 仅在 iOS 上存在问题，因此您必须调整 iframe 以适应它。
您可以放置一个包裹 iframe 的 div，在 iframe 上设置 css，对我有用的是添加:放置属性 scrolling='no'。
祝你好运。
关于javascript - iOS 上的 IFrame 高度问题(移动版 safari)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34320046/