Programiści przeglądarki internetowej Safari zaprogramowali dość nieoczekiwaną funkcjonalność dla użytkownika iPhone. Otóż w polach formularza jeśli zastosowana będzie czcionka mniejsza niż 16px to Safari będzie takie pola automatycznie powiększać. Oczywiście powiększa całą stronę co nie zawsze korzystnie wpływa na ogólny wygląd i działanie tejże. Funkcjonalność zapewne robiona dla ułatwienia wypełniania pól formularza, ale różnie to bywa z użytecznością tego rozwiązania. A dla webmastera nie znającego przyczyny takiej akcji może to być niezła niespodzianka i kilka godzin szukania rozwiązania dla tej sytuacji.
A tak jak wcześniej wspomniałem najprościej dla pól typu input, select dać font o rozmiarze minimum 16px i sprawa załatwiona. Oczywiście sytuacja dotyczy strona mobilnych dla iPhona. Przy normalnej szerokości okna przeglądarki nie występuje to działanie.
Natomiast jeśli jednak z jakiś przyczyn nie chcemy dawać takiego rozmiaru czcionki w tych polach to można to obejść w dość drastyczny sposób i zablokować powiększanie strony wpisem w metatagach. Drastyczne, bo są użytkownicy którzy lubią sobie powiększyć stronę z różnych powodów, a przy takiej blokadzie tego nie będą mogli zrobić 🙂
Ewentualnie można dodać do tego działanie JavaScript i ten wpis dodawać tylko w momencie wypełniania formularza.
1 2 3 4 5 6 7 8 9 |
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend(''); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend(''); } |