viewport چیست؟ و طریقه ی استفاده از آن

اگه سایت خودتون رو به صورت رسپانسیو طراحی می کنید باید با viewport آشنا باشید , اگه نمیدونید Viewport چیه با این آموزش همراه من باشید 😀

ویوو پورت یا Viewport نمای قابل نمایش مرورگر است , ما به قسمتی از مرورگر که سایت ها رو توش نمایش میده میگیم viewport ! دیگه ساده تر از این نمیشه گفت! شما وقتی که سایتی رو طراحی میکنید این سایت توی گوشی های موبایل ممکنه به صورتی که در کامپیوتر نمایش داده میشه نباشه , در صفحات موبایل پیکسل ها به صورت مجازی در نظر گرفته میشن , در صفحات موبایل چیزی به نام DIP یا Density Independent Pixels موجود می باشد که در این حالت پیکسل ها به صورت مجازی در نظر گرفته میشن مثلا هر ۳ پیکسل به صورت مجازی برابر با ۱ پیکسل در نظر گرفته میشه. حالا اگه ما عرض یک div رو برابر با ۱۵۰px قرار بدیم امکانش هست که توی مانیتورهای دسکتاپ (کامپیوترها) به یک صورت متفاوتی از smart phone ها نمایش داده شود.

viewport_meta_dip_problemدر اینجا viewport به کمک ما میاد تا بتونیم مشکلات خودمون رو حل کنیم , viewport رو درون تگ meta به صورت زیر میتونیم استفاده کنیم:

کد meta رو باید در قسمت head صفحه خودتون قرار بدید و بهتره که قبل از دستورات Css قرار بگیره , در دستور بالا ما در قسمت name مقدار viewport رو مینویسیم و در قسمت content تنظیمات مربوط به viewport رو انجام میدیم. مقادیری که برای تنظیمات میتونید استفاده کنید به صورت زیر خواهد بود , با ادامه اموزش همراه باشید.

تنظیمات مربوط به viewport در صفحات وب:

خب دوستان عزیز تنظیمات مربوط به viewport خیلی ساده هست , یه بچه کوچیکم می تونه اون رو راحت یاد بگیره 😀 پس واجب شد که شما هم یاد بگیرید چون توی صفحات رسپانسیو که امروزه خیلی فراگیر شده حتما استفاده میشه , بریم سراغ تنظیمات و از حاشیه پرهیز کنیم:

  • width : عرض مجازی دستگاه را تنظیم میکند (دستگاه همون صفحه نمایشگر منظورمه)
  • height : ارتفاع مجازی دستگاه را تنظیم میکند. (همون صفحه نمایشگر)
  • device-width : مثل یه متغیر هست که اندازه ی عرض فیزیکی صفحه رو داره (متغیری که اندازه عرض صفحه توی حافظه اون هست).
  • device-height : مثل یه متغیر هست که اندازه ارتفاع فیزیکی صفحه رو داره (متغیری که اندازه ارتفاع صفحه رو توی حافظه داره).
  • initial-scale : میزان زوم اولیه مرورگر روی صفحه رو تنظیم میکنه.
  • minimum-scale : حداقل زومی که کاربر میتونه انجام بده رو مشخصل میکنه , مقدار ۱٫۰ به معنای این است که نمیشه زوم رو کم کنه)
  • maximum-scale : حداکثر مقدار زومی که بازدید کننده (همون کاربر) میتونه انجام بده رو مشخص میکنه , مقدار ۱٫۰ به معنای این است که نمیتونه زوم رو زیاد کنه)
  • user-scalable : تعیین میکنه که کاربران بتونن زوم کنن یا نه! اگه مقدار yes بدیم کاربران میتونن زوم کنن و اگر مقدار no بدیم نمیتونن روی صفحه زوم کنن.

خب تنظیمات همین بود 😀 چه راحت بوووود. بریم حالا یه سری مثال بزنم براتون که قشنگ بدونید چجوری باید استفاده کرد.

مقادیری که دستگاه رو تنظیم میکنه باید مساوی با مقدارهای مورد نظر ما قرار بگیرند , مثلا اگه بخوایم عرض مرورگر خودمون رو تنظیم کنیم باید width رو برابر با چیزی که خودمون میخوایم قرار بدیم. اگه بخوایم که عرض مرورگر ما برابر با عرض کل صفحه در نظر گرفته بشه باید اون رو برابر با device-width قرار بدیم. خب حالا بریم سر مثال ها :

در مثال بالا ما عرض قسمت قابل نمایش مرورگر خودمون رو برابر با device-width یعنی عرض صفحه نمایش ( مانیتور گوشی موبایل یا کامپیوتر) قرار میدیم.

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

در مثال بالا عرض رو برابر با ۵۰۰ پیکسل قرار دادیم. دقت کنید که بعد از عدد ۵۰۰ چیزی به صورت px درج نکردیم!

دوستانی که سوال دارند یا مشکل دارند میتونن از بخش نظرات یا فروم ما مطرح کنند تا پاسخ بگیرند. بنده پاسخگوی هرگونه سوال شما هستم نگران مبتدی بودن یا حرفه ای بودن خود نباشید 😀 بیاید از هم چیز میز یاد بگیریم و پیشرفت کنیم , توی نشر اطلاعات گدا نباشید بزارید بقیه هم یاد بگیرند! موفق باشید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. علیرضا

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

    • اول جا داره بدونید فول AJAX بودن باعث کاهش seo میشه. بله امکانش هست. روی صفحه کلیک راست کنید و inspect element بزنید از سربرگ network اون صفحه ای که بهش درخواست ارسال میشه رو میتونید پیدا کنید و ویرایش کنید. کار نشد نداره 🙂 اگه نشد بگید منم یه نگاه بندازم بهش. موفق باشید

می‌خواهید دیدگاهتان را بیان کنید؟