Jak Twoja strona wygląda na iPhonie SE, iPadzie i monitorze 4K?
Wklejasz adres strony, klikasz "Wczytaj", wybierasz rozmiar ekranu z listy presetów (iPhone SE 375×667, iPhone 14 Pro 393×852, iPad 768×1024, laptop 1280×800, FullHD 1920×1080) albo przesuwasz suwakami dokładnie tyle pikseli, ile chcesz (320-2560 szerokości, 480-1440 wysokości), a strona wyświetla się w ramce iframe o tej precyzyjnej szerokości i wysokości.
To podgląd przeglądarkowy, nie emulator urządzenia. Renderuje silnik Twojej przeglądarki (Chrome, Firefox, Safari), więc CSS, fonty i layouty zachowują się tak samo jak na prawdziwym ekranie tego rozmiaru. Nie dostajesz touch events, nie symulujesz limitu RAM-u telefonu, nie odpalisz `window.matchMedia('(hover: none)')` - do tego służy DevTools w Chrome / responsive mode w Firefoxie.
Idealne do szybkiego sprawdzenia breakpointów podczas code review, demo dla klienta na trzech rozmiarach jednocześnie, albo weryfikacji czy nowy hero w design systemie nie pęka na 375 px.
Jak korzystać
- Wklej pełny adres strony w pole na górze (np. `https://twoja-firma.pl/landing`). Schemat `https://` możesz pominąć - dodamy go sami.
- Kliknij "Wczytaj" albo Enter. Strona zaciągnie się prosto z serwera docelowego do iframe - bez pośrednika.
- Wybierz preset urządzenia z paska chipów (iPhone SE / iPhone 14 / iPad / Desktop / FullHD) albo dorzuć dwa suwaki, żeby zrobić własny rozmiar.
- Aktualne wymiary widzisz na żywo w prawym górnym rogu (np. `390 × 844`). Kliknij "Obróć", żeby zamienić szerokość z wysokością (portret ↔ pejzaż).
- Klik "Odśwież" wymusza ponowne wczytanie iframe (przyda się po deployu nowej wersji). "Otwórz w nowej karcie" otwiera stronę w pełnym rozmiarze.
- Klik "Skopiuj link" zapisuje do schowka adres podglądu z zaszytymi parametrami `?url=...&w=...&h=...` - wklej koledze, otworzy się dokładnie ten sam preview.
- Jeśli zobaczysz czerwoną kartę "Strona blokuje osadzanie", to znaczy że serwer docelowy wysłał nagłówek `X-Frame-Options: DENY/SAMEORIGIN` albo `Content-Security-Policy: frame-ancestors`. Otwórz wtedy stronę w nowej karcie - przeglądarka pokaże ją normalnie.
Do czego się przydaje
Siedem typowych sytuacji, w których przyda Ci się szybki podgląd responsywności bez sięgania po DevTools:
- Code review nowego komponentu. Stażysta wrzucił PR z nowym hero, sprawdzasz w 30 sekund czy działa na iPhonie SE (najmniejszy spotykany dziś smartfon), iPadzie i laptopie. Bez stawiania repo lokalnie.
- Demo dla klienta. Spotkanie na Zoomie, otwierasz trzy zakładki tego narzędzia z różnymi presetami, pokazujesz tę samą stronę na desktopie, tablecie i telefonie jednocześnie. Klient widzi że wszystko działa.
- QA bug repro. Tester zgłosił "menu się rozjeżdża przy 412 px szerokości". Wpisujesz dokładnie 412 w suwak, odtwarzasz problem, robisz screenshot do Jira.
- Sprawdzenie konkurencji. Designer chce zobaczyć jak strona konkurenta wygląda na 4K (1920×1080) i Galaxy S22 (360×800). Wklejasz URL, klikasz preset, gotowe.
- Weryfikacja landing page'a przed kampanią Google Ads. Wstępna kwalifikacja Adsa wymaga, żeby strona była "mobile-friendly". Sprawdzasz na 375 px czy CTA jest widoczne bez scrolla i czy fonty nie są mniejsze niż 16 px.
- Sprawdzenie strony z poziomu telefonu, gdy testujesz na komputerze. Otwierasz na laptopie podgląd 375×667, bez wyciągania telefonu z kieszeni i bez deploya na staging.
- Pre-flight check po deployu. Wrzuciłeś wersję 2.3.0 na produkcję, sprawdzasz w trzech rozmiarach czy nic się nie zepsuło. Klik "Odśwież" ładuje świeżą wersję (bez cache HTML, ale assety mogą być z CDN).
Po sprawdzeniu wyglądu warto jeszcze zweryfikować jak link wygląda w social media - do tego użyj podglądu OpenGraph. Sprawdź też SSL (inspektor certyfikatu SSL) i DNS (sprawdzanie DNS) - jeśli strona ładuje się wolno albo wcale, problem zwykle leży tam.