在移动设备上响应，表格在 iframe 中不工作

Question

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

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

更新

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

桌面已调整大小

Google Chrome 在 iPhone

Answer 1

添加

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

在 <head></head> 里面，我想你错过了。

Answer 2

您无法使 table 响应，除非您使用 a JS solution.

此外，您的 table 在 iFrame 中，因此您必须为其设置滚动条。

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

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

并将滚动设置为 exp-schedule:

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

Answer 3

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

因此您必须在 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%;
}

Answer 4

我用这个 page.

修复了它

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

在移动设备上响应，表格在 iframe 中不工作

Responsive on mobile device with tables not working within iframe

css

iframe

mobile

css-tables

responsive-design