CSS - Specifek iOS (Mobiel)


Tijdens het ontwikkelen van een mobiele website of een website die responsive is kun je tegen een aantal zaken specifiek gerelateerd aan het betreffende mobiele besturingssysteem aanlopen waaronder met iOS, aanwezig op de iPhone, iPad en de iPod.

Automatisch tekst vergroten

Een aanpassing die iOS zelf kan uitvoeren is het aanpassen van de grote van de getoonde tekst bij het draaien van het apparaat. Dit standaard gedrag kan worden aangepast door de onderstaande regel op te nemen in de CSS. Door 100% aan te houden zal het automatische gedrag worden uitgeschakeld maar kan de tekst nog wel worden vergroot indien er ingezoomd wordt, door juist 125% aan te houden zal de tekst groter worden getoond op de iPhone. Helemaal uitschakelen met 'none' wordt eigenlijk afgeraden.

html {
        -webkit-text-size-adjust:100%;
}

Invoervelden en knoppen

In iOS worden invoervelden en knoppen standaard getoond met een gloed en ronde hoeken, ondanks toegepaste opmaak. Hieronder zie je in de screenshot een voorbeeld van een opgemaakt zoekveld in Safari op de iPhone plus de bijbehorende zoekknop.

Dit kan middels de onderstaande CSS eenvoudig worden opgelost zodat de invoervelden en de knoppen ook daadwerkelijk op de site worden getoond zoals dit de bedoeling was.

input {
        -webkit-appearance:textfield;
        -webkit-border-radius:0;
        border-radius:0;
}

input[type=submit] {
        -webkit-appearance:button;
        -webkit-border-radius:0;
        border-radius:0;
}

Geen tekst selecteren

Wil je om welke reden dan ook voorkomen dat een bezoeker met iOS, Google Chrome, Firefox of Internet Explorer tekst kan selecteren dan kan dit middels de volgende regels. De onderstaande drie regels zijn dan ook van toepassing op de desktopversies.

html {
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
}

Menu Links

Als je in iOS een link ingedrukt houdt zal er een menu tevoorschijn komen met een aantal opties zoals het openen van de link in een nieuw tabblad of de link toevoegen aan de leeslijst. Dit menu van de browser kan met de onderstaande regel worden uitgezet.

a {
        -webkit-touch-callout: none;
}