在移动设备上响应，表格在 iframe 中不起作用答案

【问题标题】：Responsive on mobile device with tables not working within iframe在移动设备上响应，表格在 iframe 中不起作用
【发布时间】：2015-07-02 19:59:36
【问题描述】：

我的网站在实际移动设备上看起来不正常，但当我在计算机上调整屏幕大小时，它看起来还不错。这也在 iframe 中，并且在移动设备上的 iframe 之外看起来很好。以下是实际网址，点击搜索播放器即可看到该页面。

http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/

更新

看起来其他人也有这个问题。 (Responsive)Table Width does not fit the container inside iframe on ios safari

桌面大小调整

iPhone 上的谷歌浏览器

【问题讨论】：

标签： css iframe mobile responsive-design css-tables

【解决方案1】：

添加

<meta name="viewport" content="width=device-width, initial-scale=1">

在<head></head>，我猜你错过了。

【讨论】：

【解决方案2】：

你不能让表格响应，除非你使用a JS solution.

此外，您的表格位于 iFrame 中，因此您必须为其设置滚动条。

在您的媒体查询中，将 width 设置为 iframe：

#exp-schedule-container {  width: 1200px; }

并将滚动设置为exp-schedule:

#exp-schedule { overflow-x: scroll; }

【讨论】：

我的意思是响应式将它包装在一个滚动的 div 中。我无法像那样接触外框。这必须是更多的东西。

【解决方案3】：

我不确定我是否理解您的问题。您想在移动设备上滚动表格吗？

所以你必须在 div 中关闭 iframe；

<div class="scrollablewrapper"></div>

css

.scrollablewrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: fixed; 
right: 0; 
bottom: 0; 
left: 0;
top: 0;
}

.scrollablewrapper iframe {
height: 100%;
width: 100%;
}

【讨论】：

是的，但是如果您转到播放器页面，您会看到页面拉伸并且不响应 480px 视口。它没有桌子。我也无法访问外部 iframe。
如果您无法访问外部 iframe，您可以更改其他内容吗？ [例如具有固定宽度的主体和“溢出：滚动；” ]
固定宽度在哪里？如果需要，我可以让它滚动，但问题是，页面不应该考虑到我手机上 480px 的视口吗？如果我从页面中删除表格，它会这样做。您还可以在我的桌面上看到它按预期工作，只是在 iPhone 上没有。它甚至可以在 Android 上运行。表格滚动，但我只想让宽度适合 iPhone 上不适合的视口。
啊，好吧，所以你的问题只是 Iphone 特定的？给我几分钟。我会试试的。
我明白了，用 (iframe { width: 1px; min-width: 100%; *width: 100%; }) 很好的破解。在 Iphone 5 上我没有发现任何问题。

【解决方案4】：

我从这个page 修复了它。

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

【讨论】：

非常感谢，我们花了 8 天时间找出解决方案。你太棒了。