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

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

آشنایی با Viewport
آشنایی با Viewport

منظور از 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 طول صفحه وب را برابر با طول صفحه دستگاه قرار می‌دهد (که برای هر دستگاه متفاوت است).

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

[box type=”note” align=”aligncenter” class=”” width=””]مقادیر قرار گرفته در این نمونه، مقدار پیشنهادی گوگل برای تمامی صفحات است. بنابر این پیشنهاد می‌کنیم که صفحات خود را نسبت به این مقادیر واکنش گرا طراحی کنید.[/box]

اندازه محتوا

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

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

چرا باید از viewport استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. جواب سوال:
    چون باعث بهبود تجربه کاربری وبسایت برای کاربران می شه و وبسایت در انواع دستگاه ها با صفحات نمایش بزرگ و کوچک ، کارایی و تجربه کاربری مناسب خودش رو حفظ می کنه ، همچنین بخاطر تاثیر mobile-friendly بودن صفحات بر رتبه بندی اونها در موتورهای جستجو و سئو ، لازمه توجه ویژه ای به viewport داشته باشیم

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

  3. چون viewport باعث میشه که سایت ما در دستگاه های دیگر نمایش داده شود و این باعث افزایش seoهم میشود

  4. پاسخ سوال :
    *در دستگاه های مختلف قابل نمایش باشد و کاربر به حداقل اسکرول و تغییر اندازه صفحه نیاز داشته باشد.
    *یکی از تگ های مهم در طراحی واکنش گرا
    *اهمیت داشتن از نظر سئو

    1. سلام و درود محمد عزیز، بله نکاتی که گفتی درسته. ممنونم.

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

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

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=