iFrame 比 iPhone 6 上的整个屏幕更宽

Posted 2023-03-06

【中文标题】iFrame 比 iPhone 6 上的整个屏幕更宽

【英文标题】：iFrame wider than the entire screen on iPhone 6

【发布时间】：2016-10-21 08:53:01

【问题描述】：

真的可以使用这个帮助。

我正在尝试在我的网站中打开一个应该覆盖整个屏幕的 iFrame。 不幸的是，在 iPhone 6 及更高版本中，它的宽度实际上更大。 我们在 iframe 旁边有一个宽 div。当我删除它时，一切正常。 标记和样式非常简单：

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>

android 工作正常。

我在网上找不到与此问题相关的资源。

请帮忙。 提前致谢。

【问题讨论】：

你能提供一个working example吗？有几件事可以产生这种效果。

你的 1000px div 会将 body 拉伸到至少 1000px。为什么不也做到 100%？

因为这个 iframe 是嵌入代码的一部分，而 div 属于客户端

【参考方案1】：

我有时会在移动浏览器上遇到类似问题。不同浏览器处理某些样式布局的方式存在一些关键差异。

根据我的经验，解决此问题的最佳方法是提供多个边界，即多个媒体查询的最大宽度/最小宽度。对于更强烈的造型来说，这可能会让人头疼，但我认为只需一个 iFrame 就可以做到：

CSS

#ourIframe 
  display: block; /* Because you don't know if the document has altered css rules for iFrames */
  clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */
  position: fixed;
  width: 100%; /* Fall back in case the vw is not supported. */
  width: 100vw;
  height: 100%; /* Fall back */
  height: 100vh;
  overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */
  overflow-y: auto; /* Only gives the scroll bar if needed.*/ 


@media screen and (max-width: 320px)  /* iPhones 4 & 5 */
  #ourIframe 
    max-width: 320px;
    min-width: 320px;
  


@media screen and (max-width: 375px)  /* iPhone 6 */
  #ourIframe 
    max-width: 375px;
    min-width: 375px;
  

html

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe"></iframe>

【参考方案2】：

由于 iFrame 的“固定”定位，

必须有一个设置宽度为 320px 或 100vw 的父 div 元素； 必须继承第二个 iFrame 的高度和宽度； height:inherit; width:inherit;不超过 屏幕边界。

所以here jsFiddle example

【参考方案3】：

有两种方法可以实现您的解决方案。

1. 只需将您的 iframe 包装在一个 div 中：

溢出：自动；-webkit-overflow-scrolling：触摸；

这是你的例子：http://jsfiddle.net/R3PKB/7/

2. 或者您可以使用 css 尝试：

iframe 
         width: 1px;
         min-width: 100%;
         *width: 100%;
    

如果您将宽度设置为低于纵向宽度并将最小宽度设置为 100%，那么您将获得宽度：100%，但这次是实际工作的版本，现在 iframe 采用实际的容器宽度而不是横向宽度。 *宽度：100%；是不是这样在 IE6 中宽度仍然是 100%。

但是，这只适用于 iframe 属性 scrolling="no"，如果允许滚动，则它不再起作用。所以这可能会限制它在某些情况下的用处。

这里是link 以获得更详细的答案

【讨论】：

您提出的 css 解决方案非常适合我。几周前，我在与客户一起工作时遇到了完全相同的问题，我用完全相同的 CSS 解决了它。

有时我们会忘记一些小事。干杯！！ :) @Kamelkent

我已经在墙上敲了几个小时。 webkit-overflow-scrolling 为我解决了这个问题。谢谢！