iOS e media query

[Scream]

Ciao a tutti, ho un problema di visualizzazione con iOS.
Per realizzare il layout ho fatto uso delle media query e questo è il risultato.

In visualizzazione orizzontale ho una colonna contenente 3 immagini in verticale (imposto display: block
In visualizzazione verticale le immagini si spostano in orizzontale (imposto display: inline).

Quindi:
se apro la pagina con il dispositivo in orizzontale o verticale nessun problema.
se apro la pagina con il dispositivo in verticale e lo giro in orizzontale nessun problema (le immagini da inline diventano in block).

Il problema è questo: se apro la pagina con il dispositivo in orizzontale e lo giro in verticale le immagini restano con display: block. La stessa cosa succede se parto da dispositivo verticale, lo giro in orizzontale e poi torno di nuovo in verticale.

Il viewport è impostato. L'unica soluzione, un po' brutta a dire la verità, che ho trovato è fare un refresh della pagina nel momento in cui il dispositivo cambia posizione, ma è proprio per "tappare il buco".

Qualcuno sa come risolvere?

[fcaldera]

hai aggiunto il meta viewport nell'header?
come hai definito le mediaquery?

posta del codice

[Scream]

Ecco qua il meta e le media query

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

a cui a fine pagina aggiungo

<script> // @mathias
 // https://gist.github.com/901295
 (function(doc) {
  var metas = doc.querySelectorAll('meta[name="viewport"]'),
      forEach = [].forEach;
  function fixMetas(isFirstTime) {
   var scales = isFirstTime === true ? ['1.0', '1.0'] : ['0.25', '1.6'];
   forEach.call(metas, function(el) {
    el.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
   });
  }
  fixMetas(true);
  doc.addEventListener('gesturestart', fixMetas, false);
 }(document));
</script>

Ho usato lo schema skeleton che divide in 16 colonne il layout. questa la parte "incriminata"

    <div class="one-third column center">
      [img]img1.jpg[/img]
    </div>
    <div class="two-thirds column">
      <div class="seven columns description">
        

Duis in nisl eget dolor lacinia scelerisque. In sem ligula, tincidunt ut placerat sed, semper sed risus. Nullam luctus quam non libero interdum eu interdum urna iaculis. Quisque a orci id sem dictum pulvinar. Donec vitae risus nibh, at fringilla orci. Cras pulvinar aliquam metus porttitor dapibus. Phasellus pulvinar, odio ut pellentesque fringilla, quam magna sagittis eros, a semper tellus ligula at odio. Pellentesque iaculis malesuada mauris eget egestas. Donec id justo ligula, sed sodales sed.</p>
      </div>
      <div class="four column remove-margin right">
        [img]images/small1.jpg[/img]
        [img]images/small2.jpg[/img]
        [img]images/small3.jpg[/img]
      </div>
    </div>

Questo invece il css (per la parte interessata)

.remove-margin {margin: 0 !important;}
.center {text-align: center;}
.shadow {box-shadow: 3px 3px 4px #444;}
img.small {padding: 0;margin: 8px 13px 14px;display: block;}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container .seven.columns                { width: 95%; }
  .container .four.columns                   { width: 95%; }
  img.small {max-width: 150px;padding: 0;margin: 8px 5px 14px;display: inline;}
}

[fcaldera]

ma non ti converrebbe controllare l'orientation?

@media screen and (max-width:1024px) and (orientation: landscape) {
   ... /* immagini block */
}

@media screen and (max-width:768px) and (orientation: portrait) {
   ... /* immagini inline */
}

[Scream]

ok, ma cosa cambia? di fatto è la stessa cosa, comunque provo a fare anche così. speriamo bene