Hoe bepalen iPhone oriëntatie met behulp van CSS

Met de proliferatie van smartphones zoals de iPhone maken meer en meer websites de sprong naar de mobiele wereld met ontwerpen die op verschillende scherm groottes reageren. U kunt detecteren schermformaten en speciale stijlen definiëren voor hen met behulp van CSS, of Cascading Style Sheet, media-query's. Media query's schrijven in je stylesheets om iPhone oriëntatie door zich te richten de scherm afmetingen van elk.

Instructies

1

Open uw CSS-bestand en voeg deze code toe aan de onderkant:

@media enige scherm en (max-apparaat-width: 640px) {}
}

Deze media query verwerkt het portret, of verticaal, richting van iPhones.

2

Toevoegen van een andere media query onder het eerste, deze keer gericht op de afdrukstand liggend:

@media enige scherm en (min-apparaat-width: 640px) en (max-apparaat-breedte: 960px) {}
}

3

Schrijf CSS-regels die gelden voor de afdrukstand staand binnen de media query gericht op schermen op 320 pixels en onder. Doe hetzelfde voor de afdrukstand liggend, maar plaats de regels binnen de media query voor schermen minder dan 480 pixels:

@media enige scherm en (max-apparaat-width: 640px) {}
H2 {}

font-size: 24px;

}
}
@media enige scherm en (min-apparaat-width: 640px) en (max-apparaat-breedte: 960px) {}
H2 {}

font-size: 36px;

}
}

Vergeet niet dat alleen opmaakregels die afwijken van wat u wilt weergeven op regelmatige schermen moeten gaan binnen de media vragen. Herhaal niet teveel CSS-code, of het wordt moeilijk te beheren.

Tips & waarschuwingen

  • Media vragen ook werken voor andere mobiele apparaten, ongeacht het merk. Zolang u de grootte van het scherm van het apparaat dat u wilt targeten weet, kunt u afzonderlijke stijlen voor het.