Question

如何在iframe中包含一个大型的响应式页面，该页面适用于桌面Chrome和ios safari（假设我不控制iframe内容）？考虑一个简单的例子：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    html, body, iframe {
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <iframe src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast'></iframe>
  </body>
</html>

这很简单：一个全高和全高iframe指向一个misc大，响应式页面。我看到的行为：

桌面chrome：好。 wikivoyage页面是桌面大小和可滚动的。
iphone仿真模式下的桌面镶边：好。 wikivoyage页面响应调整大小并可滚动。
Actual Ios Safari（物理手机和xcode iphone模拟器）： bad 。 wikivoyage页面没有响应性地调整大小 - 它显示了iframe中的桌面样式页面，当然这样页面一直延伸到页面的一侧：

现在，我可以通过在iframe中添加scrolling='no'来解决最后一个问题，如许多堆栈溢出问题所示：

<iframe src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast' scrolling='no'></iframe>

这在iphone + ios模拟器上正常工作：wikivoyage页面可滚动并响应调整大小。但可以预见的是，它破坏了桌面镶嵌：wikivoyage页面不能在那里垂直滚动。这是有道理的 - 我们只是告诉它不要滚动。

我完全有可能在this one之类的相关问题中遗漏了一些东西，但是接受的解决方案似乎建议使用scrolling='no'，这只会打破滚动。：（

TLDR：如何在ios safari和桌面浏览器中获得可垂直滚动的和响应的iframe？

Answer 1

好吧，我提出的一个hacky解决方案是只有两个iframe：一个有memcpy(&data->some, &some, sizeof data->some); ... memcpy(&data->value, &value, sizeof data->value); ... memcpy(&dest, data, sizeof dest);而另一个没有iframe，然后在移动设备上显示相应的iframe：

scrolling='no'

现在，此会导致向iframe的网络服务器发出两个请求。这将导致一些额外的负载，并可能使页面减慢一点。但它似乎比任何其他选择css-only soulution都好。

iframe可以在ios safari和桌面chrome中垂直滚动和响应？

1 个答案: