آموزش طراحی وب پاسخگو – The Viewport

14 جولای 2021

Viewport چیست؟

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

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

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

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

این عالی نبود !! اما یک راه حل سریع


تنظیم Viewport

HTML5 روشی را ارائه داد که به طراحان وب اجازه می دهد از طریق <meta>برچسب کنترل نمای view را به دست بگیرند .

شما باید <meta>عنصر viewport زیر را در تمام صفحات وب خود قرار دهید:

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

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

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

این initial-scale=1.0قسمت هنگام بارگیری صفحه برای اولین بار توسط مرورگر ، سطح بزرگنمایی اولیه را تنظیم می کند.

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

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


اندازه محتوا در Viewport

کاربران برای پیمایش وب سایت ها به صورت عمودی در هر دو دستگاه دسک تاپ و موبایل استفاده می شوند – اما نه به صورت افقی!

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

برخی از قوانین اضافی برای دنبال کردن:

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

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

3. از کوئری های رسانه CSS برای اعمال سبک دهی متفاوت برای صفحات کوچک و بزرگ استفاده کنید – تنظیم عرض های CSS مطلق زیاد برای عناصر صفحه باعث می شود که عنصر برای نمای در دستگاه کوچکتر بسیار گسترده باشد. در عوض ، استفاده از مقادیر عرض نسبی ، مانند عرض: 100٪ را در نظر بگیرید. همچنین ، از استفاده از مقادیر بزرگ بزرگ موقعیت دقیق مراقب باشید. این ممکن است باعث شود که این عنصر در دستگاه های کوچک خارج از ویو ویو قرار گیرد.

 

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

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