2011-09-03 10 views

risposta

15

Si potrebbe fare questo

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

Ciò costringe l'iPhone a rendere la vista uguale alla larghezza del dispositivo.

quindi utilizzare questo css per indirizzare la modalità orizzontale, che è +320px vasta

@media screen and (min-width: 321px){ 
    //styles 
} 
5

Se ho capito bene, e si desidera conoscere le media query per indirizzare uno smartphone come l'iPhone solo quando è disposto orizzontalmente, provare qualcosa di simile:

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    /* styles go here */ 
    body { 

    } 
} 
26

Sì, certo. Controllare: http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Se si vuole indirizzare iphone solo si deve aggiungere la risoluzione o la densità dppx a questi MQ.

1

in realtà se si utilizza:

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

allora si impedisce all'utente di ingrandire in qualsiasi momento, che può causare problemi di usabilità.

vi Consiglierei di utilizzare:

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

In questo caso, si forza la pagina da visualizzare al suo inizio scala originale, e così poi è possibile indirizzare diverse dimensioni di layout con le vostre domande dei media, come il layout verrà ridimensionata quando si sarà ruotare il vostro iPhone:

@media only screen and (min-width: 480px) { 
    /* landscape mode */ 
} 

@media only screen and (max-width: 479px) { 
    /* portrait mode */ 
} 

E l'utente può comunque pizzicare la pagina per ingrandire.

+0

Questo include tutti i dispositivi di risoluzione 480+ schermo ... –