تکنیک‌های CSS برای نمایشگرهای رتینا

دوشنبه ۲۴ شهریور ۹۳ • اشتراک گذاری در توییتر و فیسبوک

فشردگی پیکسل‌های صفحه نمایش رتینا که اپل از اون استفاده میکنه دو برابر صفحه نمایش‌های معمولیه به همین دلیل تصاویر توی این نمایشگرها به صورت تار در میاد،چرا که صفحه‌ نمایش رتینا سعی می‌کنه که تصویر رو ۲ برابر بزرگنمایی کنه تا در سایز واقعی نمایش داده بشه،یا به تعریف سالار کابلی :

ما سال‌ها از صفحه‌های نمایش با فشردگی ۱ پیکسل استفاده کردیم و بعد با معرفی شدن صفحه‌نمایش رتینا از طرف اپل، این فشردگی به ۲ پیکسل تبدیل شد. به این معنی که تعداد پیکسل‌هایی که در یک اندازه واحد جا می‌گیرن ۲ برابر شد

حالا راه حل چیه؟ چطوری میتونیم تصویر رو توی صفحه نمایش‌های رتینا به درستی و بدون افت کیفیت و تار شدن نشون بدیم؟

پیکسل و تراکم صفحه نمایش

به طور ساده هرچه تعداد پیکسل‌های یک واحد از صفحه بیشتر باشه کیفیت تصویر بالاتره،تصویر زیر به خوبی این حرف رو بیان میکنه:

density

جایگزین کردن تصاویر

در نظر بگیرید ما یک تصویر در ابعاد ۲۰۰px در ۴۰۰px داریم و میخوایم در صفحه نمایش رتینا به درستی و با کیفیت بالا نمایش داده بشه،پس به این صورت عمل میکنیم که همون تصویر مورد نظر رو در ابعاد دو برابر یعنی ۴۰۰px در ۸۰۰px بر روی سرور آپلود میکنیم و در css تعیین میکنیم که اگر صفحه مورد نظرمون در یک دستگاه با صفحه نمایش رتینا باز شد تصویر دوبرابر رو نشون بده به جای تصویر اصلی:


/* for low resolution display */
.image {
    background-image: url(images/lowreslogo.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}
/* for high resolution display */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.image {
    background: url(images/highreslogo.png) no-repeat;
    background-size: 200px 400px;
/* rest of your styles... */
}
}

در کُد میبینید که ما از مدیا کوئری‌های css استفاده کردیم و min-device-pixel-ratio به معنای نسبت پیکسل به دستگاست به این صورت که عددی که در مقابلش قرار میگیره تراکم پیکسلی صفحه نمایش رو نشون میده،برای اطلاع از تراکم پیکسل در صفحه نمایش گوشی‌های مختلف میتونید نگاهی به اینجا بندازید.
نکته: در اینجا ما برای مدیا کوئری‌ها از چند پسوند استفاده کردیم که برای مرورگرهای مختلف کاربرد داره،به این معنا که پسوند -o- برای مرورگر اُپرا،پسوند min--moz برای مرورگر موزیلا در نسخه‌های پایین و پسوند -webkit- برای مرورگر کروم و سافاری که از انجین وبکیت استفاده میکنن.
نکته: توجه داشته باشید که background-size تغییری نمیکنه و فقط تصویر دو برابر میشه.

استفاده از فونت آیکن

اگر شما توی صفحتون از عکس‌آیکن‌ها به طور زیاد استفاده میکنید قطعا برای نمایششون توی صفحات رتینا به مشکل برمیخورید چون باید کلی از این آیکن ها رو در سایزهای دو برابر نیز ذخیره کنید،اما یه راه بهتری هم هست اونم استفاده از فونت‌آیکن به جای عکس‌آیکن هستش.
فونت آیکن با توجه به ساختار وکتور این اجازه رو به ما میده که با تغییر سایز (چه خیلی بزرگ و چه خیلی کوچک) افت کیفیتی رو در پیش نداشته باشیم و بتونیم به طور مستقیم با دستورات css اونها رو کنترل کنیم.
از بهترین فونت‌آیکن‌ها میشه به Font Awesome،Icomoon و Fontello اشاره کرد.
کد زیر نشون میده که چطوری میشه از یک آیکن‌فونت به جای عکس‌آیکن استفاده کرد.
در HTML:


/* define span tag for letters and give them a class in HTML */
<span class=”myicon”>d</span>

و در CSS:


/* First import your font */
@font-family: myFont;
src: url('Modern_Icons.ttf'),
     url('Modern_Icons.eot'); /* IE9 */
. myicon {
    font-family: ‘Modern Icons’;
}

استفاده از تصاویر SVG به جای تصاویر BitMap

SVG زبانی برای توصیف گرافیک ۲ بعدی و برنامه های گرافیکی در XML است.این تکنولوژی مخفف کلمات Scalable Vector Graphics میباشد.SVG برای ایجاد گرافیک های برداری در صفحات وب بکار میرود و با زوم روی عکس های SVG کیفیت آنها پایین نمی آید.هر المانی که در SVG می بینید میتواند نقاشی شود. SVG یکی از توصیه های کنسرسیوم جهانی وب میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود.
SVG نسخه ۱٫۱ در ژانویه ۲۰۰۳ برای اولین بار توسط W3C توصیه شد.شرکت های Sun Adobe،Apple،IBM،Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند .
برای استفاده از تصاویری که از اجزای ساده و هندسی ساخته شده‌اند میشه از تصاویر SVG استفاده کرد.
مزایای SVG نسبت به سایر فرمت های موجود مانند GIF و JPG :
این فرمت توسط برنامه های بسیاری قابل خواندن است،حتی notepad!
حجم این فایل ها از فرمت های پیکسلی کم تر است.
این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند.
متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو میباشد!
SVG با تکنولوژی جاوا کار میکند و یک استاندارد است.
فایل های SVG کاملا XML هستند.
قابل مقایسه ترین نوع فایلی با SVG را میتوان تصاویر برداری فلش نامید . با این تفاوت که SVG یک استاندارد بیش از فلش دارد و آن موازی بودن تکنولوژی آن با استاندارد هایی مانند XSL و DOM است.در ضمن فلش یک تکنولوژی اوپن سورس نیست.برنامه Adobe Golive 5 بطور کامل از ویرایش SVG پشتیبانی میکند و ادیتور های آن درحال گسترش هستند.باید بدانید که فایل های SVG با پسوند svg ذخیره میشوند.
برای توضیحات بیشتر به بخش آموزشی SVG در W3schools مراجعه کنید یا اینکه میتونید در اینجا نمونه‌هایی ساده از SVG رو ببینید.

جایگزین کردن تمام تصاویر دوبرابر توسط جاوا اسکریپت

همونطور که گفته شد شما میتونید که چک کنید کاربر با چه نوع صفحه نمایشی وارد شده و عکس‌هاتون رو متناسب با اون صفحه نمایش در css بارگزاری کنید،ولی مشکلی که وجود داره اینه که به این صورت باید برای هر تصویر برای جایگزینی تصویر دوبرابر شده جداگانه کُد بنویسید،حالا شما فرض کنید تصاویری که قرار هست دو برابر بارگزاری بشن زیاد باشن اونوقت کُد نوشتن برای جایگزینی کار سختی میشه علاوه بر این شما ممکنه تصویر جدیدی به صفحتون اضافه کنید در این صورت باید دوباره فایل‌هاتون رو ویرایش کنید.
شما توسط جاوا اسکریپت میتونید چک کنید که کاربر با چه نوع صفحه نمایشی وارد شده و پس از اطلاع از این موضوع تمام تصاویر دوبرابر رو به صورت اتوماتیک بارگزاری کنید،حتی اگر تصویر جدیدی به صفحتون اضافه کردید دیگه نیازی نیست که کدتون رو ویرایش کنید یا کُد جدیدی بنویسید.
نگاهی به کُد زیر بیندازید:


$(document).ready(function(){

    if (window.devicePixelRatio > 1) {

        var lowresImages = $('img');

 

        images.each(function(i) {

            var lowres = $(this).attr('src');

            var highres = lowres.replace(".", "2x.");

            $(this).attr('src', highres);

        });

    }

});

در کُد بالا فرض بر این شده که شما در ابتدا نام عکس خود را با رزولوشن پایین به نام myimage.png و برای رزولوشن بالا با نام myimage2x.png ذخیره کرده‌اید.
توسط window.devicePixelRatio فشردگی صفحه نمایش رو چک میکنیم که بیشتر از ۱ باشه و اگر بود توسط attr آدرسی که در خصوصیت src عکس هست رو دریافت میکنیم و اون رو توی متغیر lowres میریزیم و بعد توسط lowres.replace در آدرس عکس اولین دات . رو پیدا میکنیم و مقدار ۲x. رو جایگزینش میکنیم،به این صورت تمام عکس‌ها شما به طور اتوماتیک جایگزین میشن فقط توجه کنید که عکس‌های با رزولوشن بالاتون رو به نام “نامی که برای عکس رزولوشن پایین در نظر گرفتید” به علاوه‌ی مقدار ۲x ذخیره کنید.
نکته: امروزه با معرفی گوشی‌های جدید مثل GalaxyS5 و… فشردگی پیکسلی از دوبرابر بیشتر شده و باید طراحی‌هامون رو نسبت به پیشرفت تکنولوژی جلو ببریم.
نکته: یادتون نره که ما به عنوان طراح وظیفه داریم طرحمون در همه‌ی دستگاه‌ها و در همه‌ی رزولوشن‌ها به درستی و در بهترین حالت خودش نمایش داده بشه.

نوشته شده در آموزش ، رابط کاربری

مرتبط با برچسب‌های ، ، ،