Jak zapobiec niechcianemu powiększaniu strony na iOS?

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
});