Question

我遇到的问题是我的网站在实际的移动设备上查看，但是当我在计算机上调整屏幕大小时，它看起来很好。这也在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

桌面调整大小

enter image description here

iPhone上的Google Chrome

enter image description here

Answer 1

我用这个page修复了它。

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

Answer 2

添加

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

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

Answer 3

除非您使用a JS solution.

，否则无法使表格响应

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

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

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

并将滚动设置为exp-schedule：

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

Answer 4

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

所以你要在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%;
}

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

4 个答案: