Responsive on mobile device with tables not working within iframe

问题

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

回答1:

I fixed it with this from this page.

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

回答2:

Add

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

inside <head></head>, I guess you missed on that.

回答3:

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%;
}

回答4:

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

标签

css

iframe

mobile

responsive-design

css-tables