Cum se folosește
- Deschideți pagina. Valorile sunt citite imediat din browserul dumneavoastră.
- Redimensionați fereastra sau rotiți dispozitivul pentru a vedea cum se actualizează dimensiunea viewport-ului și orientarea.
- Folosiți „Copiază tot” pentru a lipi detaliile într-un raport de eroare sau într-o cerere de asistență.
Cum funcționează
Browserele raportează dimensiunile în pixeli CSS, unitatea pe care paginile web o folosesc pentru layout. Pe ecranele cu densitate mare, un pixel CSS este redat cu mai mulți pixeli fizici: raportul de pixeli al dispozitivului (DPR) vă spune câți. Un telefon care raportează 390 × 844 cu un DPR de 3 are un panou de aproximativ 1170 × 2532 pixeli dispozitiv. Pe desktop, zoom-ul browserului și scalarea afișajului din sistemul de operare modifică atât DPR-ul, cât și dimensiunea CSS, astfel încât un monitor de 2560 × 1440 la o scalare de 125 % raportează 2048 × 1152.
Rezoluția ecranului reprezintă întregul afișaj; spațiul disponibil exclude barele permanente ale sistemului de operare, cum ar fi bara de activități din Windows sau bara de meniu macOS; viewport-ul este zona din fereastra browserului în care este afișată pagina, fără barele de instrumente, dar incluzând orice bară de derulare. Viewport-ul este cel la care răspund interogările media CSS, cum ar fi min-width: 768px, așa că este numărul de verificat atunci când testați layouturile responsive.
Valorile pentru schema de culori și mișcarea redusă provin din aceleași caracteristici media CSS pe care site-urile le folosesc pentru a se adapta la setările sistemului dvs. Brandurile, platforma și mobile provin din User-Agent Client Hints, pe care doar browserele bazate pe Chromium le oferă. Unele browsere rotunjesc sau fixează în mod deliberat aceste valori pentru a reduce amprenta digitală, astfel că este posibil să nu corespundă exact hardware-ului dvs.
Exemple
Testarea unui layout responsive
Un layout se strică pe laptopul unui coleg. Acesta copiază detaliile, care arată un viewport de 1280 × 649 la DPR 1.5. Setați bara de dispozitive a browserului la același viewport pentru a reproduce problema.
Alegerea dimensiunilor imaginilor
O imagine de produs este afișată cu o lățime de 400 de pixeli CSS. Pe un telefon cu DPR 3, are nevoie de 1200 de pixeli pentru a fi clară, ceea ce vă indică ce dimensiuni să includeți în srcset.
Verificarea scalării monitorului
Un monitor de 3840 × 2160 raportează 2560 × 1440 cu DPR 1.5: Windows scalează afișajul cu 150 %.
Întrebări frecvente
De ce diferă rezoluția ecranului de specificațiile monitorului meu?
Browserele raportează pixeli CSS, care reprezintă pixelii fizici împărțiți la factorul de scalare. Înmulțiți cu raportul de pixeli al dispozitivului pentru a obține o valoare apropiată de rezoluția hardware. Zoom-ul browserului schimbă, de asemenea, valoarea raportată.
Care este diferența dintre dimensiunea ecranului și dimensiunea viewport-ului?
Dimensiunea ecranului reprezintă întregul afișaj. Viewport-ul este doar zona din interiorul ferestrei browserului în care este desenată pagina, deci este mai mic și se modifică atunci când redimensionați fereastra sau deschideți instrumentele de dezvoltare.
Este folosită această informație pentru a mă urmări?
Nu prin intermediul acestei pagini: valorile sunt afișate doar pentru dumneavoastră și nu sunt stocate sau trimise nicăieri. Site-urile web pot citi aceleași valori, motiv pentru care unele browsere le rotunjesc pentru a îngreuna amprentarea digitală.
De ce este afișat suportul tactil pe laptopul meu?
Suportul tactil se bazează pe numărul de puncte tactile raportate de browser. Laptopurile cu ecran tactil le raportează chiar dacă folosiți în principal un mouse, iar unele drivere sau configurații de desktop la distanță raportează suport tactil fără a avea un ecran tactil.
Confidențialitate
Toate valorile sunt citite de JavaScript în browserul dumneavoastră și afișate doar pentru dumneavoastră. Nimic nu este stocat, încărcat sau inclus în analize; se înregistrează doar un eveniment anonim conform căruia instrumentul a fost deschis și utilizat.