آموزش طراحی سایتآموزش HTML

آشنایی با Viewport در HTML

متا تگ تنظیم کننده منطقه نمایش - ویو پورت

منظور از Viewport‌ چیست؟ متا تگ viewport در صفحات واکنش گرا یا responsive چه کاربردی دارد؟ در این مقاله با متا تگ ویو پورت آشنا می‌شویم.

آشنایی با ViewPort

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

ویو پورت برای هر دستگاه متفاوت است، به عنوان مثال ویو پورت بر روی گوشی کوچکتر از صفحه کامپیوتر است.

قبل از رواج تبلت و موبایل ها، صفحات وب فقط برای کامپیوتر طراحی می‌شدند، از این رو اندازه های این صفحات ثابت بود.

پس از رواج استفاده از تبلت و موبایل ها، صفحات وب برای نمایش بر روی این دستگاه ها که دارای ویو پورت کوچکی بودند بسیار بزرگ بود. برای حل این مشکل مرورگر های این دستگاه ها تمام صفحه را کوچک می کردند تا با اندازه صفحه دستگاه یکسان شود.

بنابر این به طور کلی ویو پورت یک تگ Meta است که در بخش تگ head قرار می‌گیرد که بخش قابل مشاهده صفحات وب توسط کاربر در دستگاه ها یا مانیتور می‌باشد. اگر ویو پورت اشتباهی را وارد کنیم، باعث می‌شود که اسکرول عرضی در صفحه ایجاد شود تا صفحه به درستی نمایش داده شود که باعث کاهش تجربه کاربری می‌شود.

چرا ویو پورت پر اهمیت است؟

در نتایج موتور های جستجو ( SERP ) یکی از فاکتور های پر اهمیت برای رتبه بندی صفحات Mobile-Friendly بودن صفحات است به این معنی که صفحات وب سایت ما در هر دستگاه موبایلی بهترین نمایش را داشته باشند و کاربر برای دستیابی به مطالب به کمترین میزان اسکرول و تغییر سایز صفحه نیاز داشته باشد.

طراحی رسپانسیو ( واکنش گرا ) در صفحات بسیار پر اهمیت و ضروریست است چون انتظار می‌رود که وب سایت ما توسط هر کاربری با هر نوع و سایز صفحه نمایشی دیده شود. این وظیفه شماست که بهترین نحوه نمایش را برای صفحات خود را با استفاده از viewport درست ارائه دهید.

تاثیر ویو پورت موبایل در سئو

تنظیم ویو پورت موبایل برای وب سایت بسیار آسان است و یکی از تاثیر گذار ترین راه برای افزایش سطح دوستانه بودن صفحه با موبایل (Friendliness) می‌باشد.

گوگل در توضیحات آموزشی خود در رابطه با طراحی صفحات رسپانسیو در ابتدایی ترین توضیحات خود به ویو پورت اشاره کرده است که این اهمیت بالای ویو پورت را نمایش می‌دهد که برای سئو باید هر کسی در وب سایت خود به آن توجه داشته باشد.

برای تشویق کاربران به تنظیم ویو پورت گوگل در توضیحاتش با ابتکار عمل خود اینطور توضیح داده است : « صفحات برای بهینه بودن در دستگاه های مختلف می‌بایست متا تگ ویو پورت را در صفحات خود در بخش Head خود وارد کنند ».

تنظیم Viewport

نسخه HTML5 یک روش برای طراحان وب ارائه کرد که توسط آن امکان تحت اختیار در آوردن ویو پورت از طریق تگ <meta> فراهم می شود.

برای تنظیم یک ویو پورت بر روی صفحه وب باید از کد های زیر استفاده کنید.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

بخش اول محتوای متا width=device-width طول صفحه وب را برابر با طول صفحه دستگاه قرار می‌دهد (که برای هر دستگاه متفاوت است).

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

مقادیر قرار گرفته در این نمونه، مقدار پیشنهادی گوگل برای تمامی صفحات است. بنابر این پیشنهاد می‌کنیم که صفحات خود را نسبت به این مقادیر واکنش گرا طراحی کنید.

اندازه محتوا

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

در استفاده از ویو پورت ها قوانین بیشتری برای لحاظ کردن وجود دارند که به شرح زیر هستند.

  • از عناصر بزرگ با طول ثابت استفاده نکنید – به عنوان مثال، اگر یک تصویر در یک اندازه بزرگ تر از اندازه ویو پورت نمایش داده شود، می تواند باعث ایجاد اسکرول افقی شود. به خاطر داشته باشید همیشه اندازه محتوای داخل صفحه را با اندازه ویو پورت یکسان کنید.
  • اجازه ندهید محتوای صفحه بر روی اندازه طولی یک ویو پورت خاص تکیه کند – از آنجایی که اندازه صفحه و طول آن بر روی دستگاه های مختلف در واحد پیکسل های css متفاوت است. محتوای تنظیم شده نباید بر روی اندازه طولی یک ویو پورت خاص تکیه کند.
  • از قابلیت مدیا کوئری داخل css برای تنظیم استایل های متفاوت در صفحه نمایش های بزرگ و کوچک استفاده کنید – استفاده از اندازه های مطلق در css برای عناصر داخل صفحه ممکن است باعث طولانی شدن طول عناصر برای صفحه های کوچک شود. به جای آن استفاده از مقدار دهی وابسته مانند 100% برای طول می تواند راه حل مناسبی باشد. همچنین مراقب باشید در تنظیم موقعیت عناصر داخل صفحه، عناصر ممکن است بر روی دستگاه های با ویو پورت کوچک تر به بیرون از صفحه هدایت شوند.

نتیجه گیری

در این مقاله به صورت کامل با ویو پورت آشنا شدیم،‌ در طراحی وب حتما باید این متا تگ را جدی بگیرید چرا که به سئو وب سایت شما خیلی کمک می‌کند و همچنین یکی از مهمترین تگ ها برای طراحی واکنش گرا هست.

در انتها چند نکته را در نظر بگیرید :

  1. این متا تگ مثل بقیه متا تگ ها حتما در بخش Head قرار می‌گیرد.
  2. در وارد کردن مقادیر دقت کنید که مقدار درست را وارد کنید تا صفحه شما بهم نریزد و از حالت Mobile-Friendly خارج نشود.
  3. از قوانین اندازه محتوا در CSS حتما استفاده کنید.

این مقاله نیز به پایان رسید. امیدوارم توضیحاتم اهمیت بالای این متا تگ را مشخص کرده باشد. اگر سوال، پیشنهاد یا انتقادی داشتید حتما بپرسید و من در اولین فرصت پاسخ خواهم داد.

تا مقاله بعدی…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر