Responsive na urządzeniu mobilnym z tabelami nie działającymi w ramach iframe

Mam problem z wyświetlaniem mojej witryny na rzeczywistym urządzeniu mobilnym, ale podczas zmiany rozmiaru ekranu na moim komputerze wszystko wygląda dobrze. Jest to również element iframe i wygląda dobrze poza ramką iframe na urządzeniu mobilnym. Poniżej znajduje się aktualny adres URL, kliknij szukaj gracza, a zobaczysz stronę.Responsive na urządzeniu mobilnym z tabelami nie działającymi w ramach iframe

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

UPDATE

Wygląda jak ktoś inny ma ten problem. (Responsive)Table Width does not fit the container inside iframe on ios safari

inny rozmiar pulpitu

enter image description here

Google Chrome na iPhone

enter image description here

Źródło

2015-04-24 Mike Flynn

Naprawiłem go z tym od tego page.

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

Źródło

2015-04-27 13:13:54

Dodaj

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

wewnątrz <head></head>, Chyba za tym tęskniłeś.

Źródło

2015-04-24 09:29:58 Zee

Jest tam? –

Nie można zrobić stół reaguje, chyba że używasz a JS solution.

Ponadto tabela jest w iFrame, więc trzeba ustawić zwój do niego.

w zapytaniu mediów ustawić width do iframe:

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

i ustawić przewinąć do exp-schedule:

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

Źródło

2015-04-24 09:49:47

Mam na myśli reagowanie na zawijanie go w div, który przewija. Nie mam takiego dostępu do zewnętrznej ramy. To musi być coś więcej. –

Nie jestem pewien, czy rozumiem pytanie. Chcesz przewinąć tabelę na urządzeniu mobilnym, prawda?

Musisz zamknąć element iframe w elemencie 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%; 
}

Źródło

2015-04-27 09:57:08

Tak, ale jeśli wszedłeś na stronę odtwarzacza, zobaczysz, że strona się rozciąga i nie reaguje na widok 480px. Działa bez stołu. Nie mam również dostępu do zewnętrznego elementu iframe. –

Jeśli nie masz dostępu do zewnętrznego elementu iframe, czy możesz zmienić coś innego? [Na przykład ciało o stałej szerokości i "overflow: scroll;" ] –

Gdzie jest stała szerokość? Mogę go przewinąć w razie potrzeby, ale problem polega na tym, że strona nie powinna wziąć pod uwagę widoku 480 pikseli w moim telefonie? Ma to miejsce, jeśli usuwam tabele ze strony.Możesz również zobaczyć na moim pulpicie, że działa zgodnie z oczekiwaniami, po prostu nie na iPhone. Działa nawet na Androidzie. Stół przewija się, ale chcę tylko szerokości, aby pasował do widoku, który nie robi na iPhonie. –

Responsive na urządzeniu mobilnym z tabelami nie działającymi w ramach iframe

Odpowiedz

Powiązane problemy