illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!
20 7168 ۲۷ مرداد ۹۳ محمد اسفندیاری

با سلام خدمت همه دوستان سون لرنی عزیز

امروز میخوام ابزاری رو برای شما معرفی کنم که با استفاده از اون میتونین سایتایی رو که طراحی میکنین در اندازه های متفاوت مشاهده کنید. این ابزار خیلی میتونه به کسانی که طراحی Responsive میکنن کمک کنه و به راحتی هرچه تمامتر میتونن سایتشون رو تست کنن.

این ابزار بر روی مرورگرهای Chrome و Safari و Firefox و Opera قابل استفاده است.

نکته : برای استفاده ار این ابزار باید به نکات زیر دقت کنید :

  • باید به اینترنت متصل باشید.
  • Javascript نباید در مرورگرتون غیرفعال باشه.

برای استفاده از این ابزار فقط کافیه که لینک زیر رو با ماوستون بگیرین و اونو به نوار بوکمارهاتون درگ ( drag ) کنید و رها کنید تا یک بوکمارک جدید به مرورگرتون اضافه بشه.

↔ Resizer

بعد از انجام این کار چیزی شبیه به زیر رو خواهید دید :

bookmark

خب حالا سایتی رو که میخواین تست کنید در مرورگتون باز کنید و روی بوکمارک Resizer کلیک کنید. با این کار اگر به اینترنت متصل باشید ، بعد از گذشت چند ثانیه به صفحه ای دیگه منتقل میشین که در بالاش یک نوار ابزار تیره رنگ وجود داره مانند عکس زیر :

toolbar

در این نوار ابزار گزینه های زیادی وجود داره که در ادامه در موردشون براتون توضیح میدم.

tool1

  1. ( Auto size ) :  با کلیک بر روی این گزینه سایز موجود بصورت اتوماتیک پیدا میشه و اندازه سایتتون به اندازه اون در میاد.
  2. ( Mobile ) : با کلیک بر روی این گزینه به نمای موبایل میروید. 320x480
  3. ( Mobile ) : یک مقدار از گزینه قبلی بزرگتر است. 320x568
  4. ( Small tablet ) : به اندازه ی تبلت کوچک میشه. 600x800
  5. ( tablet ) : تبلت با اندازه ای بزرگتر. 768x1024
  6. ( Widescreen ) : اندازه 1280x800 خواهد شد
  7. ( HDTV 1080p ) : اندازه 1920x1080 خواهد شد

نکته : به این نکته توجه کنید که بار اول که روی هر کدام از این گزینه ها کلیک کنید ، نمای Portrait فعال میشه و با کلیک مجدد روی همان گزینه به نمای Landscape خواهید رفت.

حالا ادامه :

tool2

  1. با این گزینه میتونین هر اندازه ای که دوس داشتین رو وارد کنید. وقتی که شما از یک اندازه ی خاص خیلی استفاده میکنید و در گزینه ها موجود نیس ، میتونین اون اندازه رو وارد کنید و با کلیک بر روی علامت   اونو به دیگر گزینه ها اضافه کنید.
  2. اطلاعاتی در مورد نمایی که در آن هستین به شما میدهد.

و در سمت راست این نوار ابزار :

tool3

  1. بصورت انیمیشنی اندازه سایتتون از بزرگ به کوچک تبدیل میشه و بالعکس.
  2. سایتتون Reload میشه
  3. به نمای پرینت ( print view ) خواهید رفت. ( این امکان بطور کامل فقط برای Safari و Chrome بصورت کامل پشتیبانی میشود. )
  4. اطلاعاتی در اختیار شما قرار میدهد
  5. با کلیک بر روی این گزینه از نمای Test خارج میشوید و نوار ابزار بسته میشود.

برای مطالعه بیشتر میتونین به سایت این ابزار مراجعه کنید.

امیدوارم خوشتون اومده باشه و بدردتون بخوره.

موفق باشید. یا علی

نوع کد رايگان

دیدگاه ها 20 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام آقای محمد اسفندیاری دست مریزاد خیلی وقته برای چنین ابزاری پادویی می کنم .بالاخره پیدا کردم یعنی شما پیداکردید ولی مشکل بزرگ اینجاست که نتونستم دان کنم چون این سایتی که شما لینک کردید من به صفحه دانلود نمیفرسته( که یک صفحه اجتماعیه ..). میشه لبنک دانلودشو برای مدتی هرچندکوتاه درسایت قراربدید ممنون میشم اگه اینکارو کنید.

    • ‏‏
      محمد اسفندیاری(۲۷ مرداد ۱۳۹۳)

      دوست خوبم نیازی به دانلود نداره
      فقط کافیه اون لینک آبی رنگ رو با ماوست بگیری و بندازی تو بوکمارکهات
      از اون به بعد فقط کافیه روی اون کلیک کنی
      همین

  • ‏‏
    وحید صالحی(۲۷ مرداد ۱۳۹۳)

    ممنون
    ابزار مفید و کاربردیه دوستان استفاده کنند…

  • ‏‏

    ممنونم ، خیلی کاربردی و مفیده

  • ‏‏

    مرسی خیلی کاربردی بود ..

  • ‏‏
    امید داوالا(۶ شهریور ۱۳۹۳)

    سلام، من سایتی طراحی کردم که تو سایز widescreen فقط درست نمایش میده، برای اینکه تو تبلت و موبایل هم مناسب بشه باید چکار کنم!؟ (با bootstrap.2 طراحی کردم)
    مرسی..

    • ‏‏
      محمد اسفندیاری(۶ شهریور ۱۳۹۳)

      با سلام خدمت شما
      خیلی راه وجود داره برای واکنشگرا کردن
      یکی از راه هاش اینه که از فریم ورکهایی مثل bootstrap استفاده کنیم……در همین سایت آموزش خوبی قرار داده شده است
      میتونین به لینک زیر برین و استفاده کنین
      http://www.7learn.com/tutorials/design-responsive-theme-by-bootstrap-3-part-1-start

  • ‏‏
    امید داوالا(۶ شهریور ۱۳۹۳)

    ممنون از راهنماییتون، محمد آفا 😉 .

  • ‏‏

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

  • ‏‏

    این سوال امنیتی برای ارسال نظر :)

  • ‏‏

    خب اقا من برعکسم ! برنامه نویسیم خوبه ریاضیم گنده :) فقط با جاوا مشکل دارم :)

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram