Skalowanie w przeglądarce i na urządzeniach mobilnych

Skalowanie w przeglądarce i na urządzeniach mobilnych

I Opcje dostępne w przeglądarkach internetowych

1. Skalowanie strony przez chrome
   • Cała strona jest powiększana proporcjonalnie, po zmianie rozmiaru elementów strony przeglądarka ponownie renderuję stronę, aby odzwierciedlić nowe rozmiary.
2. Uproszczony widok
   • Z założenia ma usuwać zbędne elementy z witryny internetowej np.paski, elementy interaktywne, zostawiając jedynie podstawowe elementy strony. Jest skierowany do osób z dysleksją, ADHD.
3. Wymuszone powiększanie
   • Pozwala ona na zwiększenie rozmiaru tekstu i elementów, niezależnie od domyślnego rozmiaru. Włączenie tych opcji sprawia, że każdy element na stronie, który nie ma określonych wymiarów, jest skalowany. Np. czcionki itd. co sprawia że cała strona się rozjeżdza.

II Blokowanie skalowania (popsucia się strony)

1. Możemy zastosować viewport:

   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

   Ale to rozwiązanie generuje błąd w pagespeed (Ułatwienia dostępu) oraz z tego co sam sprawdziłem czasem nie działa tak jak powinno.
2. Na stronie http://metamorfoza.com.pl/ udało się rozwiać problem ze skalowaniem poprzez nadanie max-height: 100% na znaczniki tekstu, co blokuje ich skalowanie przez przeglądarkę.

   h1, h2, h3, h4, h5, p, a, em, strong {
      font-synthesis: none !important;
      max-height: 100%;
   }