iOS设备上网站iFrame无法显示问题求助附现有代码

嘿，针对你遇到的iOS设备上iframe不显示的问题，结合你的现有代码，我整理了几个优先级由高到低的修复方向，你可以逐个尝试：

1. 检查混合内容拦截（最可能的触发原因） #

如果你的主站 daniell.info 是通过 HTTPS 访问的，而iframe的源地址是HTTP协议（http://www.daniellwijdenbosch.epizy.com/index.php），iOS Safari会严格拦截这种「不安全的混合内容」，直接隐藏iframe。

修复方法：
优先确保iframe的源地址使用HTTPS协议（如果目标站点支持的话）：

<iframe src="https://www.daniellwijdenbosch.epizy.com/index.php" style="border:none;" scrolling="no" width="100%"></iframe>

如果目标站点暂不支持HTTPS，你可以在主站的HTTPS配置中开启允许混合内容（不推荐，存在安全风险），或者推动目标站点迁移到HTTPS环境。

2. 修复iOS对vh单位的兼容性问题 #

iOS Safari对vh单位的计算有特殊性——当浏览器状态栏、导航栏变化时，90vh的高度会被错误计算，导致iframe被压缩到不可见。

修复方法：

方案A：用JavaScript动态计算高度 #

在页面加载和窗口尺寸变化时，重新计算并设置iframe的高度：

<iframe id="targetIframe" src="https://www.daniellwijdenbosch.epizy.com/index.php" style="border:none;" scrolling="no" width="100%"></iframe>
<script>
function updateIframeHeight() {
  const iframe = document.getElementById('targetIframe');
  // 计算可用高度：视口高度减去顶部5%的margin
  const usableHeight = window.innerHeight * 0.95;
  iframe.style.height = `${usableHeight}px`;
}
// 页面加载完成后执行
window.addEventListener('load', updateIframeHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', updateIframeHeight);
</script>

同时修改CSS，移除固定的vh高度：

iframe {
  margin-top: 5%;
  overflow: hidden;
}

方案B：使用动态视口单位（iOS 15+支持） #

如果你的目标用户主要使用iOS 15及以上版本，可以用dvh（动态视口高度）替代vh，它会自动忽略状态栏、导航栏的影响：

iframe {
  margin-top: 5%;
  height: 90dvh;
  overflow: hidden;
}

3. 优化Viewport设置 #

iOS Safari默认的viewport行为可能导致布局缩放异常，建议添加shrink-to-fit=no强制禁用自动缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

4. 调整iframe的滚动属性 #

iOS上scrolling="no"的兼容性较差，建议改用CSS控制滚动，并移除HTML上的scrolling属性：

<iframe src="https://www.daniellwijdenbosch.epizy.com/index.php" style="border:none; overflow:hidden;" width="100%"></iframe>

同时确保目标页面的内容高度不超过iframe设置的高度，避免出现不必要的滚动问题。

内容的提问来源于stack exchange，提问作者Daniell