Online Tool Store
Tester Poziomu Powiększenia Przeglądarki
Testuj reflow przy powiększeniu 50%-800%, z kalkulatorem efektywnej szerokości na żywo i wykrywaniem przepełnienia względem progu WCAG 1.4.10 wynoszącego 320px.
🔒 To narzędzie działa w całości w Twojej przeglądarce. Twoje pliki nigdy nie są wysyłane na serwer.
Symuluje powiększenie, zmieniając rozmiar przykładowego układu do tej samej "efektywnej szerokości CSS", jaką miałaby prawdziwa przeglądarka przy tym poziomie powiększenia — bliskie przybliżenie, a nie prawdziwy silnik renderowania. Zawsze potwierdzaj na własnej witrynie rzeczywistym powiększeniem przeglądarki.
100%
Witamy w naszym sklepie
Krótki akapit tekstu, aby zobaczyć, jak tekst zawija się przy zmianie symulowanego poziomu powiększenia.
Jak z tego korzystać
- Wybierz szerokość okna przeglądarki (1280px odpowiada standardowemu punktowi odniesienia WCAG 1.4.10).
- Przeciągnij suwak powiększenia lub kliknij ustawienie wstępne od 50% do 800% — efektywna szerokość CSS aktualizuje się na żywo.
- Obserwuj odznaki zaliczono/niezaliczono: czy osiągnięto próg WCAG 320px oraz czy przykładowy układ wymaga poziomego przewijania przy tej szerokości.
- Przełącz się na tryb "Stała szerokość (częsty błąd)", aby zobaczyć, jak jeden element o stałej szerokości psuje reflow i powoduje niezaliczenie testu.
- Zastosuj tę samą intuicję na własnej witrynie, a następnie zweryfikuj rzeczywistym powiększeniem przeglądarki dla dokładnego wyniku.
FAQ
Czy to naprawdę powiększa moją przeglądarkę?
Nie — zmienia rozmiar przykładowego układu do tej samej "efektywnej szerokości CSS", jaką miałaby prawdziwa przeglądarka przy tej szerokości okna i poziomie powiększenia, a następnie sprawdza rzeczywiste poziome przepełnienie. To bliskie przybliżenie, a nie silnik renderowania Twojej rzeczywistej przeglądarki. Dla własnej witryny zawsze potwierdzaj rzeczywistym powiększeniem przeglądarki (Ctrl/Cmd + "+").
Dlaczego WCAG szczególnie interesuje się powiększeniem 400%?
Kryterium sukcesu 1.4.10 (Reflow) WCAG 2.1 wymaga, aby treść przełożyła się na jedną kolumnę bez potrzeby poziomego przewijania przy efektywnej szerokości 320 pikseli CSS — szerokości uzyskiwanej z okna o szerokości 1280px powiększonego do 400%, dlatego 1280px i 400% są standardowym punktem odniesienia.
Czym jest "efektywna szerokość" i jak jest obliczana?
Efektywna szerokość to szerokość okna przeglądarki podzielona przez procent powiększenia (np. 1280px ÷ 400% = 320px). Reprezentuje, ile miejsca w pikselach CSS ma Twój układ po zastosowaniu powiększenia — tę samą liczbę, jaką prawdziwa przeglądarka zgłosiłaby Twojemu CSS.
Jakie problemy z układem zwykle pojawiają się przy dużym powiększeniu?
Kontenery o stałej szerokości powodujące poziome przewijanie, nakładające się elementy nawigacji, tekst wykraczający poza kontener oraz przycinane przyciski lub karty to najczęstsze problemy, które pojawiają się dopiero po przekroczeniu 150-200% powiększenia. Przełącz to narzędzie w tryb "Stała szerokość (częsty błąd)", aby zobaczyć dokładnie, jak wygląda ta usterka.
Czy powiększanie naprawdę zmniejsza widoczny obszar w pikselach CSS?
Tak. Fizyczna szerokość okna przeglądarki w pikselach CSS zmniejsza się wraz ze wzrostem powiększenia — to mechanizm symulowany przez to narzędzie poprzez obliczanie efektywnej szerokości, dlatego strona zbudowana ze stałymi szerokościami w pikselach może zacząć przepełniać się poziomo na długo przed 400%.
Jak wypadamy na tle innych
| Funkcja | Online Tool Store | Testery skupione na reflow | Narzędzia podglądu urządzeń przez URL |
|---|---|---|---|
| Kalkulator efektywnej szerokości (szerokość okna ÷ powiększenie %) | ✓ | ✓ | ✗ |
| Sprawdzenie poziomego przepełnienia na żywo (zaliczono/niezaliczono) | ✓ | ✓ | ✗ |
| Ustawienia wstępne powiększenia do 800% z reflow na żywo | ✓ | ✓ | ✗ |
| Nie wymaga zewnętrznego URL/osadzania (działa natychmiast, bez blokad X-Frame-Options) | ✓ | ✓ | ✗ |
Szybki krok weryfikacyjny przed otwarciem prawdziwych narzędzi deweloperskich przeglądarki i powiększeniem swojej działającej strony.