نحوه استفاده
- صفحه را باز کنید. مقادیر بلافاصله از مرورگر شما خوانده می‌شوند.
- پنجره را تغییر اندازه دهید یا دستگاه خود را بچرخانید تا اندازه ویوپورت و جهت صفحه به‌روزرسانی شود.
- از «کپی همه» برای جای‌گذاری جزئیات در گزارش خطا یا درخواست پشتیبانی استفاده کنید.
نحوه کار
مرورگرها اندازه‌ها را بر حسب پیکسل CSS گزارش می‌کنند؛ واحدی که صفحات وب برای چیدمان استفاده می‌کنند. در نمایشگرهای با تراکم بالا، هر پیکسل CSS با چند پیکسل فیزیکی رسم می‌شود: نسبت پیکسل دستگاه (DPR) نشان می‌دهد چند برابر است. تلفنی که 390 × 844 را با DPR 3 گزارش می‌کند، پنلی با حدود 1170 × 2532 پیکسل دستگاه دارد. در دسکتاپ، بزرگ‌نمایی مرورگر و مقیاس‌بندی نمایشگر سیست‌عامل هر دو DPR و اندازهٔ CSS را تغییر می‌دهند؛ بنابراین یک نمایشگر 2560 × 1440 در مقیاس 125٪، 2048 × 1152 گزارش می‌کند.
رزولوشن صفحه کل نمایشگر است؛ فضای در دسترس نوارهای دائمی سیست‌عامل مانند نوار وظیفهٔ Windows یا نوار منوی macOS را کنار می‌گذارد؛ viewport بخشی از پنجرهٔ مرورگر است که صفحه در آن نمایش داده می‌شود، بدون نوار ابزار اما با احتساب هر نوار اسکرول. viewport همان چیزی است که media queryهای CSS مانند min-width: 768px به آن پاسخ می‌دهند؛ بنابراین عددی است که هنگام آزمایش چیدمان واکنش‌گرا باید بررسی کنید.
مقادیر طرح رنگ و کاهش حرکت از همان ویژگی‌های رسانه‌ای CSS می‌آیند که وب‌سایت‌ها برای سازگاری با تنظیمات سیستم شما استفاده می‌کنند. برندها، پلتفرم و موبایل از User-Agent Client Hints می‌آیند که فقط مرورگرهای مبتنی بر Chromium ارائه می‌کنند. برخی مرورگرها عمداً این مقادیر را گرد یا ثابت می‌کنند تا اثر انگشت مرورگر کاهش یابد؛ بنابراین ممکن است دقیقاً با سخت‌افزار شما مطابقت نداشته باشند.
نمونه‌ها
آزمایش یک چیدمان واکنش‌گرا
چیدمانی روی لپ‌تاپ همکارتان به‌هم می‌ریزد. او جزئیات را کپی می‌کند که viewport برابر با 1280 × 649 و DPR 1.5 را نشان می‌دهد. برای بازتولید مشکل، نوار ابزار دستگاه مرورگر خود را روی همان viewport تنظیم کنید.
انتخاب اندازه‌های تصویر
یک تصویر محصول با عرض 400 پیکسل CSS نمایش داده می‌شود. در تلفنی با DPR 3 برای واضح بودن به 1200 پیکسل نیاز دارد؛ این موضوع نشان می‌دهد چه اندازه‌هایی را در srcset بگنجانید.
بررسی مقیاس‌بندی نمایشگر
یک نمایشگر 3840 × 2160 مقدار 2560 × 1440 را با DPR 1.5 گزارش می‌کند: Windows نمایشگر را با مقیاس 150٪ مقیاس‌بندی می‌کند.
پرسش‌های متداول
چرا رزولوشن صفحه با مشخصات مانیتور من تفاوت دارد؟
مرورگرها پیکسل‌های CSS را گزارش می‌دهند که برابر با پیکسل‌های فیزیکی تقسیم بر ضریب مقیاس هستند. برای نزدیک شدن به رزولوشن سخت‌افزاری، مقدار را در نسبت پیکسل دستگاه ضرب کنید. بزرگ‌نمایی مرورگر نیز مقدار گزارش‌شده را تغییر می‌دهد.
تفاوت میان اندازه صفحه‌نمایش و اندازه ویوپورت چیست؟
اندازه صفحه‌نمایش کل نمایشگر است. ویوپورت فقط ناحیه‌ای از پنجره مرورگر است که صفحه در آن رسم می‌شود؛ بنابراین کوچک‌تر است و با تغییر اندازه پنجره یا باز کردن ابزار توسعه‌دهنده تغییر می‌کند.
آیا از این اطلاعات برای ردیابی من استفاده می‌شود؟
توسط این صفحه نه: مقادیر فقط به شما نمایش داده می‌شوند و در جایی ذخیره یا ارسال نمی‌شوند. وب‌سایت‌ها می‌توانند همین مقادیر را بخوانند؛ به همین دلیل برخی مرورگرها آن‌ها را گرد می‌کنند تا انگشت‌نگاری را دشوارتر کنند.
چرا پشتیبانی لمسی در لپ‌تاپ من نشان داده می‌شود؟
پشتیبانی لمسی بر اساس تعداد نقاط لمسی است که مرورگر گزارش می‌دهد. لپ‌تاپ‌های دارای صفحه لمسی حتی اگر بیشتر از ماوس استفاده کنید آن‌ها را گزارش می‌دهند و برخی درایورها یا تنظیمات دسکتاپ از راه دور نیز بدون صفحه لمسی پشتیبانی لمسی را گزارش می‌دهند.
حریم خصوصی
همه مقادیر توسط جاوااسکریپت در مرورگر شما خوانده می‌شوند و فقط به شما نمایش داده می‌شوند. هیچ چیزی ذخیره، بارگذاری یا در تحلیل داده‌ها گنجانده نمی‌شود؛ فقط یک رویداد ناشناس مبنی بر باز شدن و استفاده از ابزار ثبت می‌شود.