Kako ustavimo nekontrolirano večanje besedila na iPhone-u ali iPad-u?


Pri pregledovanju spletnih strani na iPhonu/iPadu nam slednji avtomatsko prilagajajo velikost besedila, da izboljšajo branje vsebine. Žal pa velikokrat ta prednost prilagajanja besedila spreminja velikost posameznih polj, slednji pa posledično tako deformirajo postavitev strani oziroma design.

Samo spreminjanje velikosti lahko sicer preprečimo z uporabo CSS značke »html { -webkit-text-size-adjust:none; } ». Problem te rešitve pa je, da ugasne prilagajanje na vseh brskalnikih, ki podpirajo webkit značke. Tako tudi v Safariju ali Chromu funkcija »spremeni velikost besedila« ne bo delovala.

Rešitev tega problema je dokaj enostavna, saj moramo že omenjeni znački dodati pogoj o resoluciji zaslona. Rešitev bi tako bila

@media only screen and (max-device-width: 960px) {
html { -webkit-text-size-adjust:none; }
}

Maksimalna širina je nastavljena na 960px zaradi ležečega formata iPhona 4.

Primerjave pred in po uporabi CSS značke
»html { -webkit-text-size-adjust:none; } ».

Komentiraj


*