این نسخه ی نمایشی را کاوش کنید
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
. - صفحه را با استفاده از دستگاه های مختلف بارگیری مجدد کنید تا مشاهده کنید مرورگر تصاویر مختلف را بارگذاری می کند.
برای این کار می توانید از شبیه ساز دستگاه استفاده کنید. اگر به دنبال تراکم نمایشگر خاصی هستید، در اینجا چند دستگاه وجود دارد که باید امتحان کنید:
| تراکم 1 برابر | Blackberry Playbook، بسیاری از مانیتورهای خارجی |
| 2 برابر چگالی | iPad یا iPhone 5/6 |
| چگالی 3 برابر | گلکسی اس 5 یا آیفون ایکس |
- برای کدی که این کار را انجام می دهد،
index.htmlبررسی کنید.
چگونه کار می کند؟
مفهوم توصیفگرهای چگالی ممکن است برای اکثر افراد ناآشنا باشد. برای درک بهتر آنها، داشتن کمی پیش زمینه در مورد نحوه عملکرد مرورگر با پیکسل ها کمک می کند.
پیکسل چیست؟
بیایید از همان ابتدا با تعریف پیکسل شروع کنیم. این ساده به نظر می رسد، اما "پیکسل" در واقع می تواند معانی زیادی داشته باشد:
- پیکسل دستگاه (معروف به "پیکسل فیزیکی")
- کوچکترین نقطه رنگی که می توان روی یک دستگاه نمایش داد.
- پیکسل منطقی
- اطلاعاتی که رنگ را در یک مکان خاص در یک شبکه مشخص می کند. این نوع پیکسل اندازه فیزیکی ذاتی ندارد.
- پیکسل CSS
- مشخصات CSS پیکسل را به عنوان واحد اندازه گیری فیزیکی تعریف می کند. 1 پیکسل = 1/96 اینچ.
تراکم پیکسلی
تراکم پیکسلی (همچنین به عنوان «تراکم صفحه» یا «تراکم نمایشگر» نیز شناخته می‌شود) چگالی پیکسل‌های دستگاه را در یک ناحیه فیزیکی مشخص می‌سنجد. این معمولاً با استفاده از پیکسل در هر اینچ (ppi) اندازه گیری می شود.
برای سال‌های متمادی، 96 ppi تراکم نمایشگر بسیار رایج بود (از این رو CSS پیکسل را 1/96 اینچ تعریف می‌کرد). از دهه 1980، وضوح پیش فرض ویندوز بود. علاوه بر این، وضوح مانیتورهای CRT بود.
این امر با رایج شدن نمایشگرهای LED در دهه 2000 شروع به تغییر کرد. به ویژه، اپل در سال 2010 با معرفی نمایشگرهای رتینا سر و صدای زیادی به پا کرد. این نمایشگرها حداقل وضوح 192 ppi داشتند که دو برابر وضوح نمایشگرهای "عادی" بود (192 ppi/96 ppi = 2).
window.devicePixelRatio
با معرفی فناوری نمایشگر جدیدتر، "پیکسل های دستگاه" از نظر اندازه و شکل فیزیکی شروع به تغییر کردند و دیگر اندازه "پیکسل های CSS" نیستند. نیاز به تعریف رابطه بین اندازه "پیکسل های دستگاه" و "پیکسل های CSS" چیزی است که منجر به معرفی devicePixelRatio (که گاهی اوقات "CSS Pixel Ratio" نامیده می شود) شد.
devicePixelRatio رابطه بین پیکسل های دستگاه و پیکسل های CSS را برای یک دستگاه خاص تعریف می کند. یک دستگاه 192ppi دارای یک devicePixelRatio 2 (192ppi/96ppi = 2) است زیرا "2 پیکسل نمایشگر آن به اندازه 1 پیکسل CSS هستند".
این روزها بیشتر دستگاه ها دارای نسبت پیکسل دستگاه بین 1.0 تا 4.0 هستند.
با تایپ
window.devicePixelRatioدر کنسول، تراکم پیکسلی دستگاه را تعیین کنید.برای مشاهده نسبت پیکسل دستگاه های رایج، این جدول را مشاهده کنید. اکثر آنها بین 1.0 و 4.0 هستند.
بنابراین چگونه این اطلاعات را در واقع اعمال می کنید؟
اندازه تصاویر بر اساس نسبت دستگاه به پیکسل
برای اینکه تصاویر در نمایشگرهای با وضوح بالا به بهترین شکل به نظر برسند، لازم است نسخه‌های تصویری متفاوتی برای devicePixelRatios مختلفPixelRatios ارائه کنید.
| نسبت پیکسل دستگاه | نشان می دهد که: | در این دستگاه، یک تگ <img> با عرض CSS 250 پیکسل، زمانی که تصویر منبع ... |
|---|---|---|
| 1 | 1 پیکسل دستگاه = 1 پیکسل CSS | عرض 250 پیکسل |
| 2 | 2 پیکسل دستگاه = 1 پیکسل CSS | عرض 500 پیکسل |
| 3 | 3 پیکسل دستگاه = 1 پیکسل CSS | عرض 750 پیکسل |
موارد قابل توجه:
- ابعاد پیکسلی که در ویرایشگرهای تصویر، فهرست فایل‌ها و مکان‌های دیگر فهرست شده‌اند، اندازه‌گیری پیکسل‌های منطقی هستند.
- برای صفحه نمایش با وضوح بالاتر و نمایشگرهای بزرگتر، به تصاویر با ابعاد بزرگتر نیاز دارید. صرفاً بزرگ‌نمایی تصاویر کوچک‌تر، هدف ارائه نسخه‌های تصویری متعدد را از بین می‌برد. اگر تصویری با وضوح بالا ارائه نمی شد، مرورگر این کار را به هر حال انجام می داد.
از توصیفگرهای چگالی برای ارائه چندین مورد استفاده کنید
تصاویر
توصیفگرهای چگالی، در ارتباط با ویژگی "srcset"، می توانند برای ارائه تصاویر مختلف به دستگاه های مختلف PixelRatios استفاده شوند.
- به فایل
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استفاده کنید. برای مثال، توصیفگر چگالی برای بسیاری از صفحه‌های رتینا (window.devicePixelRatio = 2) به صورت2xنوشته می‌شود. - اگر توصیفگر چگالی ارائه نشده باشد،
1xدر نظر گرفته می شود. - گنجاندن توصیفگرهای چگالی در نام فایل ها یک قرارداد رایج است (و به شما کمک می کند تا فایل ها را پیگیری کنید) اما ضروری نیست. تصاویر می توانند هر نام فایلی داشته باشند.
- نیازی به اضافه کردن ویژگی
sizesنیست. ویژگیsizesفقط با توصیف کننده های عرض استفاده می شود.