Czy zdarzyło Ci się, że na urządzeniach Apple, zwłaszcza iPhone’ach, strona nagle się powiększała po kilkukrotnym kliknięciu w przyciski lub inne elementy formularza? Jest to domyślne zachowanie systemu iOS, które może być irytujące i prowadzić do problemów z interakcją na stronie. W tym artykule pokażemy, jak skutecznie zapobiec temu problemowi w WordPressie.
Dlaczego iOS automatycznie powiększa stronę?
System iOS automatycznie powiększa stronę, gdy użytkownik kilkukrotnie tapnie w interaktywny element, np. przycisk, pole formularza lub link. Jest to mechanizm mający na celu poprawę czytelności treści, ale w przypadku dobrze zaprojektowanych stron responsywnych może to być zbędne i uciążliwe.
Jak to naprawić?
Najlepszym sposobem na zapobieganie automatycznemu zoomowaniu na iOS jest dodanie odpowiedniego meta tagu viewport. Można to zrobić ręcznie w kodzie HTML lub automatycznie w WordPressie za pomocą funkcji dodanej do pliku functions.php.
Dodawanie meta tagu viewport w WordPressie
Dodaj poniższą funkcję do pliku functions.php Twojego motywu WordPress:
function disable_ios_zoom() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">';
}
add_action('wp_head', 'disable_ios_zoom');Co robi ten kod?
Dodaje metatag viewport do sekcji <head> każdej strony w WordPressie.width=device-width – Ustawia szerokość strony zgodnie z ekranem urządzenia.initial-scale=1 – Ustawia domyślny poziom powiększenia na 100%.maximum-scale=1 – Blokuje możliwość powiększania strony przez użytkownika.user-scalable=no – Wyłącza możliwość ręcznego zoomowania.
Alternatywne sposoby zapobiegania zoomowaniu
Jeśli chcesz zachować możliwość powiększania strony przez użytkownika, ale uniknąć niechcianego zoomowania przy klikaniu w przyciski, możesz dodać następujący kod CSS:
button, input, select, textarea, a {
touch-action: manipulation;
}🔹 touch-action: manipulation; – Zapobiega niepotrzebnym gestom powiększania na iOS, ale pozwala na interakcję z elementami.
Dodatkowo, jeśli problem nadal występuje, można zastosować JavaScript:
$(document).on("gesturestart", function (event) {
event.preventDefault(); // Blokuje zoomowanie przy podwójnym tapnięciu
});
Dodaj komentarz