تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

مقاله: قالب Retina Ready چیست و چگونه بسازیم؟

    1. قالب Retina Ready چیست و چگونه بسازیم؟ »

      قالب Retina Ready چیست و چگونه بسازیم؟

      نگارش: , by (مدیریت کل سایت)
      2013/11/27 07:12 PM
      امتیاز: 

      پس از معرفی آیفون ۴ با صفحه نمایش رتینا و در واقع تکنولوژی رتینا توسط اپل که هر پیکسل را در دستگاه خود نصف کرده بود (Pixel Ratio 2) بحث جدیدی در طراحی وب ایجاد کرد که باعث شد طرح های جدید برای اینگونه صفحه نمایش ها بهینه شوند و به چنین قالبی Retina Ready می گویند.

      اگر قالب را برای صفحه نمایش رتینا Optimize نکنیم چه اتفاقی می افتد؟

      اگر تصاویر قالب برای دستگاه هایی با صفحه نمایش رتینا بهینه سازی نشوند به صورت محو و بلر شده نمایش داده می شود. علت آن است که دستگاه سعی می کند تصویر را دو برابر بزرگ کند ولی در سایز اصلی نمایش دهد.

      به همین دلیل قالب در این دستگاه ها به زیبایی نسخه اصلی نخواهد بود.

      در چه دستگاه هایی از صفحه نمایش رتینا استفاده شده است؟


      • آیفون ۴ به بعد
      • آیپد ۳ به بعد
      • مکبوک پرو رتینا
      • آیپاد تاچ


      آیا داستان به همین جا ختم می شود؟

      متاسفانه باید بگوییم خیر. علاوه بر دستگاه های اپل، گجت های اندرویدی با pixel ratio های ۱.۵ و حتی بالاتر از ۲ نیز وجود دارد که باید برای هر کدوم از آن ها نیز تصاویر جدا قرار دهیم.

      راه حل چیست؟

      چند راه حل برای این مشکل وجود دارد. چون موضوع این مقاله فقط در مورد صفحه رتینا است ابتدا راهکار برای نمایش صحیح تصاویر در صفحه نمایش های رتینا را میگوییم.

      هر تصویر از قالب را که ذخیره می کنید نسخه ۲ برابر بزرگتر آن (2x) را هم در هاست قرار داده و از این اسکریپت استفاده کنید.

      Retina.js | Retina graphics for your website

      نکته: تصاویر دوبرابر بزرگ شده باید کیفیت بالایی داشته باشد (دوباره طراحی شود) نه اینکه صرفا عکس را با کیفیت پایین دو برابر کنید و در هاست قرار دهید چون عملا دستگاه همین کار را می کند!

      نکته ۲: همچنین از قابلیت scale css نیز میتوان استفاده کرد که دیگر نیازی به جاوااسکریپت معرفی شده نخواهید داشت.

      اما چه کنیم که در همه دستگاه ها (نه فقط دستگاه های اپلی) آیکن ها و عکس ها درست نمایش داده شود و محو نشوند؟

      ۱. از تصاویر SVG استفاده کنید. تصاویر SVG برخلاف تصاویر رسم می شوند بنابراین هرچقدر بزرگ شوند افت کیفیت نخواهند داشت.

      نمونه:

      http://upload.wikimedia.org/wikipedi...n_New_Logo.svg

      برخی از موتور های جستجوگر فونت هم اکنون نسخه SVG را نیز علاوه بر PNG برای دانلود قرار داده اند.

      ۲. استفاده از فونت آیکن ها بجای عکس آیکن ها. اگر از آیکن های زیادی استفاده می کنید با استفاده از فونت آیکن ها (مثل fontawesome) می توانید با ایمپورت یک فونت از تعداد زیادی آیکن با موضوعات مختلف در صفحه خود استفاده کنید.

      http://fontawesome.io

      اگر سوالی بود در خدمتم.

      موفق باشید.
  1. Top | #2
    کاربر مفید و فعال

    ورژن ویبولتین
    8-|
    نوشته ها
    1,481
    میزان امتیاز
    177

    پیش فرض

    نکته ۲: همچنین از قابلیت scale css نیز میتوان استفاده کرد که دیگر نیازی به جاوااسکریپت معرفی شده نخواهید داشت.
    این رو میشه توضیح بدید ؟ این چگونه انجام میشه ؟؟

    کاربر مقابل از VatanMizban بابت این پست مفید تشکر کرده است:


  2. Top | #3
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    scale css تقریبا یه چیزی مثل همین لوگو وی بی ایران هست که در سایز بزرگتر ساخته میشه و با transform : scale ( X , Y ) میتوینم کوچیکتر یا بزرگترش کنیم که داخل صفحه نمایش های رتینا بهتر نمایش داده بشه (توضیحش زیاده خیلی مختصر عرض کردم!) ؛ این روش خوبه ولی زیادی زمان میبره توضیه من استفاده از فونت آیکون ها هست.

    البته اگر درست متوجه موضوع علی عزیز شده بوده باشم!

    8 تشکر توسط:


  3. Top | #4
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,685
    میزان امتیاز
    3117

    پیش فرض

    ممنون از پرهام عزیز.

    یکی از طریق transform:scale(0.5) میشه این کار رو انجام داد یکی هم از طریق کوچک نشان دادن تصویر.
    روش دوم به این صورت هست که شما عکس رو دو برابر بزرگتر ذخیره میکنید ولی در سایز کوچک نمایش میدین.

  4. Top | #5
    کاربر مفید و فعال

    ورژن ویبولتین
    8-|
    نوشته ها
    1,481
    میزان امتیاز
    177

    پیش فرض

    نقل قول نوشته اصلی توسط Leberman نمایش پست ها
    scale css تقریبا یه چیزی مثل همین لوگو وی بی ایران هست که در سایز بزرگتر ساخته میشه و با transform : scale ( X , Y ) میتوینم کوچیکتر یا بزرگترش کنیم که داخل صفحه نمایش های رتینا بهتر نمایش داده بشه (توضیحش زیاده خیلی مختصر عرض کردم!) ؛ این روش خوبه ولی زیادی زمان میبره توضیه من استفاده از فونت آیکون ها هست.

    البته اگر درست متوجه موضوع علی عزیز شده بوده باشم!
    ممنون از شما و علی آقا یه نکته ی دیگه هست

    درواقع یه فایل js رو به قالب اضافه میکنیم و بعد مثل رسپانسیو یه css جدید برای قالب تعریف میکنیم بعد تمام المانت هارو دوبرابر برای اون تعریف میکنیم

    درسته ؟
    ویرایش توسط VatanMizban : 2014/04/05 در ساعت 10:51 PM

    کاربر مقابل از VatanMizban بابت این پست مفید تشکر کرده است:


  5. Top | #6
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    نقل قول نوشته اصلی توسط VatanMizban نمایش پست ها
    ممنون از شما و علی آقا یه نکته ی دیگه هست

    درواقع یه فایل js رو به قالب اضافه میکنیم و بعد مثل رسپانسیو یه css جدید برای قالب تعریف میکنیم بعد تمام المانت هارو دوبرابر برای اون تعریف میکنیم

    درسته ؟
    بله اما اگر از scale استفاده کنید نیازی نیست js اضافه کنید.داخل خود سایت retinajs مثال اورده:
    کد:
    #logo {   background-image: url('/images/my_image.png'); }  @media all and (-webkit-min-device-pixel-ratio: 1.5) {   #logo {     background-image: url([email protected]');     background-size: 200px 100px;   } }

    6 تشکر توسط:


  6. Top | #7
    کاربر مفید و فعال

    ورژن ویبولتین
    8-|
    نوشته ها
    1,481
    میزان امتیاز
    177

    پیش فرض

    یه سوال دیگه دارم . مثلا برای امتحان کردن رسپانسیو تو سایت Testing responsive web design in various resolutions | ResponsiveTest یا با کوچیک بزرگ کردن صفحه تست میکنم . برای رتینا از کجا تست کنیم . با توجه به اینکه ممکنه کسی بخواد سایت رو با رتینا بهینه کنه ولی هیج صفحه ی نمایش رتینا نداشته باشه . ممنون

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. لوکال چیست و چگونه لوکال هاست بسازیم
    توسط Tvmovie در انجمن آموزش های وی بولتین
    پاسخ: 14
    آخرين نوشته: 2015/05/05, 12:40 AM
  2. پاسخ: 21
    آخرين نوشته: 2014/05/22, 02:22 PM
  3. لیست بازیهای PS3 در وردپرس
    توسط sajjad_mabani در انجمن پرسش و پاسخ
    پاسخ: 2
    آخرين نوشته: 2013/01/09, 10:19 AM
  4. درخواست دانلود photo shop cs2 image ready
    توسط iroption در انجمن گرافیکی
    پاسخ: 0
    آخرين نوشته: 2012/09/17, 05:42 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •