کاوش این نسخه نمایشی
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید. - صفحه را بااستفاده از دستگاه‌های مختلف مجدداً بار کنید تا ببینید مرورگر تصاویر مختلفی را بار می‌کند.
برای این کار می‌توانید از شبیه‌ساز دستگاه استفاده کنید. اگر به‌دنبال تراکم‌های نمایش خاصی هستید، در اینجا چند دستگاه برای امتحان کردن وجود دارد:
| تراکم ۱ برابر | Blackberry Playbook، بسیاری از نمایشگرهای خارجی |
| تراکم ۲ برابر | iPad یا IPhone 5/6 |
| تراکم ۳ برابر | Galaxy S5 یا iPhone X |
- برای دیدن کدی که این کار را انجام می‌دهد،
index.htmlرا بررسی کنید.
روش کار؟
مفهوم توصیف‌کننده‌های تراکم ممکن است برای اکثر افراد ناآشنا باشد. برای درک بهتر آن‌ها، داشتن کمی اطلاعات پس‌زمینه درباره نحوه کار مرورگر با پیکسل‌ها مفید است.
پیکسل چیست
بیایید از همان ابتدا با تعریف پیکسل شروع کنیم. این ساده به‌نظر می‌رسد، اما «پیکسل» درواقع می‌تواند معانی زیادی داشته باشد:
- پیکسل دستگاه (یا «پیکسل فیزیکی»)
- کوچک‌ترین نقطه رنگی که می‌تواند در دستگاه نمایش داده شود.
- پیکسل منطقی
- اطلاعاتی که رنگ را در مکان خاصی در شبکه مشخص می‌کند. این نوع پیکسل اندازه فیزیکی ذاتی ندارد.
- پیکسل CSS
- مشخصات CSS پیکسل را به‌عنوان واحد اندازه‌گیری فیزیکی تعریف می‌کند. ۱ پیکسل = ۱/۹۶ اینچ.
تراکم پیکسل
تراکم پیکسل (که «تراکم صفحه‌نمایش» یا «تراکم نمایشگر» نیز نامیده می‌شود) تراکم پیکسل‌های دستگاه را در یک ناحیه فیزیکی مشخص اندازه‌گیری می‌کند. این مقدار معمولاً بااستفاده از پیکسل در اینچ (ppi) اندازه‌گیری می‌شود.
برای سال‌های متمادی، ۹۶ ppi تراکم نمایش بسیار رایجی بود (بنابراین CSS یک پیکسل را به‌عنوان ۱/۹۶ اینچ تعریف می‌کند). از دهه ۱۹۸۰، این وضوح پیش‌فرض Windows بود. علاوه‌براین، این وضوح نمایشگرهای CRT بود.
با رایج شدن نمایشگرهای LED در دهه ۲۰۰۰، این وضعیت شروع به تغییر کرد. به‌ویژه، Apple در سال ۲۰۱۰ با معرفی نمایشگرهای Retina سروصدای زیادی به‌پا کرد. این نمایشگرها حداقل وضوح ۱۹۲ ppi داشتند که دو برابر وضوح نمایشگرهای «معمولی» بود (۱۹۲ ppi/۹۶ ppi = ۲).
window.devicePixelRatio
با معرفی فناوری نمایشگر جدیدتر، «پیکسل‌های دستگاه» ازنظر اندازه فیزیکی و شکل متفاوت شدند
و دیگر هم‌اندازه «پیکسل‌های CSS» نبودند. نیاز به تعریف رابطه بین اندازه «پیکسل‌های دستگاه» و «پیکسل‌های CSS» چیزی است که منجر به معرفی devicePixelRatio (گاهی اوقات «نسبت پیکسل CSS» نامیده می‌شود) شد.
devicePixelRatio رابطه بین پیکسل‌های دستگاه و پیکسل‌های CSS را برای دستگاهی خاص تعریف می‌کند. یک دستگاه ۱۹۲ ppi دارای devicePixelRatio ۲ است (۱۹۲ ppi/۹۶ ppi = ۲) زیرا «۲ پیکسل نمایشگر آن به اندازه ۱ پیکسل CSS است».
این روزها اکثر دستگاه‌ها نسبت پیکسل دستگاهی بین ۱٫۰ و ۴٫۰ دارند.
تراکم پیکسل دستگاه را با تایپ کردن
window.devicePixelRatioدر کنسول تعیین کنید.برای دیدن نسبت پیکسل دستگاه‌های رایج، این جدول را مشاهده کنید. اکثر آن‌ها بین ۱٫۰ و ۴٫۰ است.
پس چطور واقعاً از این اطلاعات استفاده می‌کنید؟
اندازه تصاویر براساس نسبت پیکسل دستگاه
برای اینکه تصاویر در صفحه‌نمایش‌های با وضوح بالا به بهترین شکل ممکن دیده شوند،
لازم است نسخه‌های مختلفی از تصویر برای devicePixelRatios مختلف ارائه شود.
| نسبت پیکسل دستگاه | نشان می‌دهد که: | در این دستگاه، برچسب <img> با عرض CSS ۲۵۰ پیکسل، وقتی بهترین ظاهر را خواهد داشت که تصویر منبع... |
|---|---|---|
| 1 | ۱ پیکسل دستگاه = ۱ پیکسل CSS | ۲۵۰ پیکسل پهنا |
| 2 | ۲ پیکسل دستگاه = ۱ پیکسل CSS | ۵۰۰ پیکسل پهنا |
| 3 | ۳ پیکسل دستگاه = ۱ پیکسل CSS | ۷۵۰ پیکسل پهنا |
نکات قابل توجه:
- ابعاد پیکسل فهرست‌شده در ویرایشگرهای تصویر، دایرکتوری‌های فایل، و جاهای دیگر، اندازه‌گیری پیکسل‌های منطقی است.
- برای صفحه‌نمایش‌های با وضوح بالاتر و نمایشگرهای بزرگ‌تر، به تصاویری با ابعاد بزرگ‌تر نیاز دارید. صرفاً بزرگ کردن تصاویر کوچک‌تر هدف ارائه چندین نسخه تصویر را نقض می‌کند. اگر تصویر با وضوح بالا ارائه نشده باشد، مرورگر درهرصورت این کار را انجام می‌دهد.
استفاده از توصیف‌کننده‌های تراکم برای ارائه چندین تصویر
توصیف‌کننده‌های تراکم، در ارتباط با مشخصه «srcset»، می‌توانند برای ارائه تصاویر مختلف به devicePixelRatios مختلف استفاده شوند.
- به فایل
index.htmlنگاه کنید و عنصر<img>را یادداشت کنید.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
این مثال در قالب کلمات:
-
1x،2x، و3xهمگی توصیف‌کننده‌های تراکم هستند که به مرورگر می‌گویند تراکم پیکسلی که تصویر برای آن درنظر گرفته شده است چقدر است. این کار باعث می‌شود مرورگر برای تعیین این اطلاعات نیازی به بارگیری تصویر نداشته باشد. - مرورگر می‌تواند بین سه تصویر انتخاب کند:
flower-1x.jpg(برای مرورگرهایی با تراکم پیکسل1.0)،flower-2x.jpg(برای مرورگرهایی با تراکم پیکسل2.0)، وflower-3x.jpg(برای مرورگرهایی با تراکم پیکسل3.0). flower.jpgتصویر جایگزین برای مرورگرهایی است که ازsrcsetپشتیبانی نمی‌کنند.
نحوه استفاده از این:
- از devicePixelRatio و واحد
xبرای نوشتن توصیف‌کننده‌های تراکم استفاده کنید. برای مثال، توصیف‌گر تراکم برای بسیاری از صفحه‌نمایش‌های Retina (window.devicePixelRatio = 2) به‌صورت2xنوشته می‌شود. - اگر توصیف‌گر تراکم ارائه نشده باشد، فرض می‌شود که
1xاست. - گنجاندن توصیف‌کننده‌های تراکم در نام فایل‌ها یک قرارداد رایج است (و به شما کمک می‌کند فایل‌ها را پیگیری کنید) اما ضروری نیست. تصاویر می‌توانند هر نام فایلی داشته باشند.
- نیازی به گنجاندن مشخصه
sizesنیست. مشخصهsizesفقط با توصیف‌کننده‌های عرض استفاده می‌شود.