Nástroje zdarma
Jaká je velikost viewportu?
Zjistěte rozměry okna, velikost obrazovky a poměr pixelů. Změňte velikost okna a sledujte, kde se přepínají breakpointy.
Velikost vašeho viewportu
Aktualizuje se při změně velikosti okna…
CSS pixely
- Velikost obrazovky (CSS px)
- …
- Poměr pixelů (DPR)
- …
- Orientace viewportu
- …
- Barevná hloubka
- …
Aktuální CSS breakpoint
Výchozí minimální šířky. Zvýrazněný rozsah je největší breakpoint, kterému vaše okno odpovídá. Váš projekt může používat vlastní hodnoty.
Tailwind CSS …
- base≥ 0px
- sm≥ 40rem
- md≥ 48rem
- lg≥ 64rem
- xl≥ 80rem
- 2xl≥ 96rem
Bootstrap 5 …
- xs≥ 0px
- sm≥ 576px
- md≥ 768px
- lg≥ 992px
- xl≥ 1200px
- xxl≥ 1400px
Ybug nic z toho neukládá. Sdílený odkaz nese údaje za znakem #, a tuhle část URL prohlížeč nikdy neposílá na server.
Další nástroje zdarma
- Analyzátor a čistič HAR souborů Odstraňte z HAR souboru cookies a tokeny, než ho pošlete dál, a najděte request, který selhal. Soubor neopustí váš prohlížeč.
- Porovnání obrázků Porovnejte dva screenshoty pixel po pixelu. Zvýrazněte, co se změnilo, nebo mezi verzemi přejíždějte.
- Informace o prohlížeči a prostředí Prohlížeč, OS, rozlišení a viewport na jednom místě. Vložte je do tiketu, nebo pošlete vývojáři odkaz.
- Kontrola a parsování user agentu Zjistěte svůj user agent a client hints. Nebo vložte řetězec a zjistěte prohlížeč, engine, OS a typ zařízení.
- Testovací čísla platebních karet Zkopírujte čísla karet pro testování checkoutu v sandboxu. Úspěšné platby, zamítnutí i 3D Secure.
Často kladené dotazy
Jaký je rozdíl mezi velikostí viewportu a rozlišením obrazovky?
Viewport je oblast, ve které se vykresluje stránka. Zde ho měříme pomocí window.innerWidth a innerHeight včetně posuvníků. Velikost obrazovky čteme ze screen.width a screen.height v CSS pixelech. Kvůli škálování displeje nebo nastavení soukromí se může lišit od nativního rozlišení monitoru.
Co je device pixel ratio? Je to totéž co DPI?
Device pixel ratio (DPR) je poměr fyzických pixelů k CSS pixelům. DPR 2 znamená, že jeden CSS pixel zabírá dva pixely displeje v každém směru. Zoom prohlížeče ho může změnit. DPI vyjadřuje počet pixelů na fyzický palec. Samotné DPR nestačí, aby web spolehlivě zjistil skutečné DPI displeje.
Jaké breakpointy nástroj používá?
Výchozí hodnoty Tailwind CSS: sm 40rem, md 48rem, lg 64rem, xl 80rem a 2xl 96rem. Bootstrap 5: sm 576px, md 768px, lg 992px, xl 1200px a xxl 1400px. Jednotky rem v Tailwindu vycházejí z výchozí velikosti písma prohlížeče, obvykle 16px. Jde o referenční sady, nástroj nezkoumá CSS vašeho webu.
Proč se číslo nezmění při přiblížení dvěma prsty?
Nástroj zobrazuje layout viewport, podle kterého se řídí CSS breakpointy. Na mobilu přiblížení dvěma prsty mění viditelnou část stránky (visual viewport), zatímco layout viewport obvykle zůstává stejný. Zoom na desktopu může změnit layout viewport i DPR.
„Jak velké jste měli okno?“
Feedback widget Ybugu připojí velikost viewportu a obrazovky ke každému hlášení chyby. Nemusíte se doptávat.
Vyzkoušejte Ybug na 10 dní zdarmaInstalace během pár vteřin. Kreditní karta není potřeba.