shift

Viewport موبایل چیست؟

Viewport موبایل چیست؟

عاطفه
دسته: طراحی وبسایت  تگ ها: رسپانسیو سایت , Viewport موبایل چیست , mobile viewport , How to configure the viewport for responsive pages

 

 

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

چگونه viewport را تنظیم کنیم؟

یک‌راه تنظیم viewport، استفاده از متا تگ viewport است. این متا یک کد کوچک است که ما آن را در قسمت HEAD، سند HTML مان می‌گذاریم.
گوگل توصیه می‌کند که از متا تگ viewport برای رسپانسیو وب‌سایت استفاده کنیم.

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

متا تگ viewport که در بالا نشان داده‌شده است می‌گوید:

width=device-width

 initial-scale=1

 به زبان عامیانه این کد می‌گوید:
Width: عرض صفحه وب به‌اندازه عرض صفحه‌نمایشی می‌شود که قرار است صفحه در آن نمایش داده شود.
Initial scale: اگر صفحه در حالت افقي نمايش داده شود (يك تلفن به پهلو بچرخد) صفحه به عرضي كه در صفحه‌نمایش می‌تواند باشد، ساخته می‌شود.

 

چگونه viewport مان را چک کنیم؟

اگر تگ viewport در صفحه‌تان به‌درستی تنظیم‌شده است برای پیدا کردن آن‌ها از mobile seo tool استفاده کنید.
در تصویر بالا viewport بیان‌نشده است. صفحه روی دسکتاب به‌صورت نرمال نمایش داده می‌شود؛ اما روی یک دیوایس موبایل با یک صفحه‌نمایش کوچک‌تر، تمام عناصر موجود در صفحه کوچک‌تر می‌شوند تا در صفحه‌نمایش موبایل جا شوند. به این معنی که وقتی یک یوزر به این صفحه می‌رود، برای اینکه متن به‌اندازه کافی برای خواندن بزرگ شود روی آن زوم می‌کند.


تنظیمات viewport

وقتی ما viewport را برای بعضی دیوایس ها که روی آن نمایش داده می‌شوند تنظیم می‌کنیم، عکس و متن بدون اینکه یوزر برای خواندن آن‌ها در صفحه زوم کند خوانا هستند.


دسترسی

از "minimum-scale"، "maximum-scale"، یا "user-scalable" در viewport استفاده نکنید. اگر شما از آن‌ها استفاده کنید شما تعداد افرادی که ممکن است به‌خوبی صفحاتتان را ببینید را محدود می‌کنید.

نظر خود را بنویسید...
ارسال نظر
لغو