Come determinare iPhone orientamento utilizzando i CSS

July 1

Con la proliferazione di smartphone come l'iPhone, siti web sempre più stanno facendo il salto verso il mondo mobile con disegni che rispondono alle diverse dimensioni dello schermo. È possibile rilevare le dimensioni dello schermo e definire stili speciali per loro tramite CSS o Cascading Style Sheet, media query. Scrivi media query nei vostri fogli di stile per determinare l'orientamento iPhone di mira le dimensioni dello schermo di ciascuno.

istruzione

1 Aprire il file CSS e aggiungere questo codice in basso:

@media solo schermo e (max-device-width: 640px) {
}

Questa media query gestisce il ritratto, o verticale, l'orientamento di iPhone.

2 Aggiungere un altro media query al di sotto del primo, questa volta mira il orientamento orizzontale:

@media solo schermo e (min-device-width: 640px) e (max-device-width: 960px) {
}

3 Scrivi regole CSS che si applicano al orientamento verticale all'interno della media query mira schermi a 320 pixel e sotto. Fare lo stesso per l'orientamento orizzontale, ma mettere le regole all'interno del media query per gli schermi meno di 480 pixel:

@media solo schermo e (max-device-width: 640px) {
h2 {

font-size: 24px;

}
}
@media solo schermo e (min-device-width: 640px) e (max-device-width: 960px) {
h2 {

font-size: 36px;

}
}

Ricordare che solo le regole di stile che differiscono da ciò che si desidera visualizzare su schermi normali dovrebbe andare dentro le media query. Non ripetere il codice CSS troppo, o sarà difficile da gestire.

Consigli e avvertenze

  • media query lavorano anche per altri dispositivi mobili, indipendentemente dalla marca. Finché si conosce la dimensione dello schermo del dispositivo che si desidera raggiungere, è possibile creare stili separati per esso.