problema media query ipad e galaxy tab

[unprocione]

Ciao a tutti!

Ho scritto il mio primo css con media queries. L'ho validato ed è tutto ok, su schermo di laptop o normale si vede perfettamente. Il layout deve occupare tutta la finestra disponibile in percentuale. L'immagine deve vedersi height: 100% e il video width: 100% e anche height:100%. Infatti queste pagine dai vostri pc si vedranno perfettamente:

http://www.noisefuel.net/prova/index.htm Pagina con foto
http://www.noisefuel.net/prova/after.htm Pagina con video


Il problema è che Ipad interpreta male entrambe le pagine.
La pagina con foto non ha il div centrato (anche se #content ha

 {display: block; position: absolute; margin: 0 auto;}

) ma spostato sulla sinistra e sulla destra resta uno spazio nero che è il background (

 body {background: #000;}

).
La pagina del video invece fa schifo proprio: il video è piccolo piccolo in alto a sinistra. Eppure il video è wrappato in #video che ha

 {display: block; position: absolute; margin: 0 auto; padding: 0; bottom: 0;}

Galaxy Tab 7 invece ha problemi enormi con l'immagine, perchè se io imposto tramite la media query che min-width o width devono essere 1024px (come la sua risoluzione) viene fuori una scrollbar orizzontale. Se invece imposto width in 100% ovviamente viene fuori una scrollbar per l'altezza ma l'immagine occupa il 100% della finestra (giustamente), ma se volessi mettere height: 100%; e width: auto; la visualizzazione sarebbe uguale a width: 100%.
La pagina del video si vede invece bene.

Qualche idea?

[Camarillo]

Ciao unprocione.

Credo sia la position: absolute a rovinare la festa, infatti, quando dai position: absolute i margini è come se non ci fossero. Prova a togliere position: absolute, che non dovrebbe essere necessaria.

Per quanto riguarda il video, anche qui togli position: absolute e prova a dare width e height all'iframe.

[unprocione]

Originariamente inviato da Camarillo
Ciao unprocione.

Credo sia la position: absolute a rovinare la festa, infatti, quando dai position: absolute i margini è come se non ci fossero. Prova a togliere position: absolute, che non dovrebbe essere necessaria.

Per quanto riguarda il video, anche qui togli position: absolute e prova a dare width e height all'iframe.

Ciao Camarillo!
Senza position: absolute le cose diventano disastrose! E la situazione del video non migliora.
Nella media query dò già i valori per ipad:

iframe {width: 100%; height: 100%; position: absolute;} #video {width: 1024px; height: 768px;}

Ma non cambia niente!

[Camarillo]

Mmm...

Mi spiace, ma non saprei dirti, anche perché non ho un tablet con cui testare.

[unprocione]

No ma grazie per la disponibilità
In realtà ora funziona e AVESSI CAPITO PERCHè -_-
ho messo width e hight inline nel tag <iframe> e poi definito in percentuale nelle varie media queries, definendo in px il div wrapper. BOOOOH, in teoria definire w e h inline nn è cosa buona e giusta ma se funziona....