I am having an issue where my website looks off on an actual mobile device, but when I resize the screen on my computer it looks just fine. This is within an iframe also, and looks fine outside of the iframe on a mobile device. Below is the actual URL, click on search for a player and you wills see the page.
http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/
UPDATE
Looks like someone else has this issue. (Responsive)Table Width does not fit the container inside iframe on ios safari
Desktop Resized
Google Chrome on iPhone
I fixed it with this from this page.
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
inside <head></head>, I guess you missed on that.
I'm not sure if I understand your Question. You want to Scroll the Table on the mobile device right?
So you've to close the iframe in a div;
<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%;
}
You can't make table responsive, unless you use a JS solution.
Furthermore, your table is in an iFrame, so you have to set a scroll to it.
In your media query set the width to the iframe:
#exp-schedule-container { width: 1200px; }
and set the scroll to the exp-schedule:
#exp-schedule { overflow-x: scroll; }
来源：https://stackoverflow.com/questions/29843680/responsive-on-mobile-device-with-tables-not-working-within-iframe