Probleem:
Maak jij ook websites? Dan zal jij die ook responsive maken zodat ze goed ogen op kleinere schermen zoals tablets en smartphones. Gebruik je een thema in WordPress of Elementor dan zal deze dat al voor een groot gedeelte voor je doen.
Maar je kan natuurlijk in jouw CSS bestand ook nog zelf styling toevoegen. Een bekende methode is de volgende regel CSS:
@media screen and (max-width: 1024px) {
// plaats hier CSS die uitgevoerd moet worden op schermen die 1024pixels of minder zijn
}
Deze regels hebben altijd prima gewerkt, vooral op iPads, omdat dit de maximale breedte van het scherm was. Dit is in Elementor ook de standaard instelling om te bepalen of een website op een normaal scherm of een tablet wordt getoond.
Echter heb ik sinds dit jaar een iPad 9th generation die uitgebracht is in 2021. Deze iPad heeft in de browser geen maximale breedte meer van 1024 pixels maar van 1080 pixels.
Oplossing:
Dat betekent dus dat bovenstaande media query niet meer gaat werken voor responsive op nieuwe iPads. Je zal deze moeten wijzigen naar onderstaande CSS om de nieuwste iPads te ondersteunen.
@media screen and (max-width: 1080px) {
// plaats hier CSS die uitgevoerd moet worden op schermen die 1080pixels of minder zijn
}
Opzoek naar een nieuwe iPad? Bezoek dan Knibble.nl voor de goedkoopste prijs.