به آموزشگاه مجازی سینا خوش آمدید!

آموزش منطقه دید(viewport) در واکنش گرایی CSS

امتیاز
(0)

تنظیم منطقه دید(Viewport)

به ناحیه ی قابل مشاهده ی کاربر در یک صفحه ی وب، منطقه دید یا viewport گفته می شود. منطقه دید(viewport) بسته به دستگاه مورد استفاده، تغییر می کند(در گوشی های موبایل، نسبت به صفحه ی نمایش کامپیوتر، کوچکتر است). ما باید از عنصر متای زیر، در بخش <head> از تمام صفحات وب خود استفاده کنیم:

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

این کد به مرورگر دستورالعمل‌هایی در مورد نحوه کنترل ابعاد و مقیاس‌بندی صفحه می‌دهد. بخش width=device-width عرض صفحه را طوری تنظیم می کند تا برابر با عرض صفحه ی نمایشِ(screen-width) دستگاه قرار گیرد(که بسته به نوع دستگاه تغییر می کند). بخش initial-scale=1.0 میزان بزرگنماییِ(zoom) اولیه ی صفحه را وقتی که در ابتدا بارگذاری می شود، تنظیم می کند. 

در زیر یک مثال از یک صفحه ی وب، بدون استفاده از تگ متای viewport قرار دارد و یک صفحه نیز وجود دارد که از تگ متای viewport استفاده می کند:

 

(بدون استفاده از تگ متای viewport )

 

(با استفاده از تگ متای viewport)

نکته: اگر این صفحه را در موبایل یا تبلت خود مشاهده می کنید، می توانید روی لینک بالای تصاویر فوق کلیک کنید تا تفاوت آنها را مشاهده کنید. 

اندازه کردن محتوا با منطقه دید(Viewport)

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

برخی قواعد دیگر که باید رعایت کنیم:

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

2. اجازه ندهید محتوا برای نمایش خوب به یک عرض خاص متکی باشد. زیرا ابعاد صفحه های نمایش، در دستگاه های مختلف بسیار متفاوت است؛ محتوا نباید برای اینکه به خوبی ارائه داده شوند، به یک viewport تکیه کنند. 

3. از مدیا کوئری های CSS برای اعمال استایل های مختلف برای صفحات نمایش کوچک و بزرگ استفاده کنید. تنظیم عرض های مطلقِ(absolute) بزرگ، برای عناصر صفحه باعث می شود این عناصر برای دستگاه های کوچکتر، بسیار گسترده شوند. به جای آن، از مقادیر عرض نسبی، مانند %100 استفاده کنید. همچنین مراقب استفاده از مقادیر موقعیت دهی بزرگ مطلق(large absolute positioning values) باشید. زیرا می تواند باعث شود که عنصر مورد نظر در دستگاه های کوچک خارج از viewport قرار گیرد. 

 

  • بازدید: 72

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال