افزودن پشتیبانی از صفحه نمایش رتینا به قالب های وردپرس

با خط رو به رشد محصولات صفحه نمایش شبکیه چشم در حال حاضر فقط از اپل، وقت آن است که مطمئن شوید تم وردپرس شما در آن دستگاه ها داغ به نظر می رسد. در این مقاله من به چندین گزینه مختلف برای اضافه کردن پشتیبانی از شبکیه به تم های خود می پردازم.
Retina چیست؟

نمایشگر رتینا نام تجاری است که توسط اپل برای نمایشگرهای کریستال مایع استفاده می‌شود که دارای تراکم پیکسلی کافی هستند که چشم انسان قادر به تشخیص پیکسل‌ها در فاصله‌ی معمولی نیست (https://en.wikipedia.org/wiki/Retina_Display).

پس این چگونه بر تصاویر موجود در تم های شما تأثیر می گذارد؟

یک نمایشگر معمولی 72ppi یا پیکسل در هر اینچ است، از طرف دیگر صفحه نمایش رتینا بین 135-300ppi است. این برای تصاویر موجود در طرح زمینه شما چه معنایی دارد، مشاهده یک تصویر 72ppi در مانیتور LCD استاندارد شما کاملاً خوب و خوب به نظر می رسد، اما همان تصویر را روی دستگاه نمایشگر رتینا به سمت بالا بکشید و تار به نظر می رسد. چگونه این وضعیت را اصلاح کنیم؟ دوست من بخوانید…

1. CSS3 > تصاویر

احتمالا بدیهی‌ترین گزینه استفاده از CSS3 است، با پشتیبانی مرورگر که روز به روز بهتر و بهتر می‌شود — استفاده از ویژگی‌های CSS3 بی‌معنا است. مواردی مانند گرادیان‌های پس‌زمینه خطی، شعاع حاشیه، سایه‌های کادر و سایه متن همراه با RGBA در صورت استفاده با هم می‌تواند دکمه‌های زیبایی مانند مثال زیر ایجاد کند. بدون استفاده از تصاویر، هرچه درخواست های HTTP کمتر باشد، سایت شما سریعتر بارگذاری می شود.

2. @2x تصاویر

@2x، WTH این است!؟ به تصاویر 72ppi فکر کنید، استاندارد فعلی @1x که در نمایشگرهای معمولی عالی به نظر می رسد. اکنون با نمایش‌های رتینا که رزولوشن آن دو برابر است، اینجاست که @2x وارد عمل می‌شود، درست است؟ اساساً @2x استانداردی برای تصاویر و گرافیک رتینا است که توسط اپل ایجاد شده است.

هنگامی که مورد استفاده قرار می‌گیرید، فایل 72ppi خود را چیزی مانند logo.png و یک logo@2x.png خواهید داشت که بسیار ساده است.

چگونه آن تصویر @2X را به دستگاه های شبکیه چشم ارائه می کنید؟

یک اسکریپت منبع باز عالی Retina.js ارائه تصاویر با وضوح بالا به دستگاه‌های Retina را بسیار آسان می‌کند. اگر یک نوع با وضوح بالا از آن تصویر وجود داشته باشد، در این مورد logo@2x.png، اسکریپت به طور خودکار آن تصویر را در جای خود عوض می کند. به همین سادگی.

اگر از تصاویر پس‌زمینه در CSS استفاده می‌کنید، باید از یک درخواست رسانه ساده استفاده کنید، چیزی مانند:

@ فقط صفحه نمایش رسانه و (-webkit-min-device-pixel-ratio: 1.5)،
فقط صفحه نمایش و (-o-min-device-pixel-ratio: 3/2)،
فقط صفحه نمایش و (min--moz-device-pixel-ratio: 1.5)،
فقط صفحه نمایش و (min-device-pixel-ratio: 1.5) {
     #menu-icon {background-image: url(../images/icons/menu@2x.png);}
}

3. عناصر img درون خطی

فرض کنید یک گالری عکس بزرگ دارید و ساختن دو نسخه از هر تصویر غیرممکن است. یکی دیگر از اسکریپت های منبع باز عالی، Foresight.js است. ، به طرح زمینه شما این توانایی را می دهد که تشخیص دهد آیا دستگاه کاربر قادر به مشاهده تصاویر با وضوح بالا قبل از درخواست از سرور است یا خیر. همچنین بررسی می کند که آیا دستگاه کاربر در حال حاضر یک اتصال شبکه به اندازه کافی سریع برای تصاویر با وضوح بالا دارد یا خیر. بسته به صفحه نمایش دستگاه و اتصال شبکه، foresight.js تصویر مناسب را برای نمایش درخواست می کند.

4. فونت های نماد

فونت‌های نماد عالی هستند، بی‌نهایت مقیاس‌پذیر هستند، می‌توان آن‌ها را به هر رنگی تغییر داد، دارای ناک اوت‌های شفاف، تغییر شفافیت، متحرک سازی با CSS3 و موارد دیگر! چندین راه حل پولی و منبع باز وجود دارد. من شخصاً بسته متن باز Font Awesome را ترجیح می دهم، در حال حاضر بیش از 220 نماد وجود دارد، استفاده از آن برای استفاده تجاری کاملاً رایگان است و استفاده از آن بسیار آسان است.

پس منتظر چه چیزی هستید؟ از همین امروز شروع به اعمال این شیوه ها کنید!