واحدهای نمای بزرگ، کوچک و پویا

واحدهای CSS جدید که نمایانگرهای موبایل را با نوار ابزار پویا به حساب می‌آورند.

Bramus

نمای و واحدهای آن

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

• vw = 1٪ از عرض اندازه نمای.
• vh = 1٪ از ارتفاع اندازه نمای.

به یک عنصر عرض 100vw و ارتفاع 100vh بدهید تا دید درگاه را به طور کامل پوشش دهد.

واحدهای vw و vh در مرورگرهایی با این واحدهای اضافی فرود آمدند

• vi = 1% از اندازه محور درون خطی درگاه نمایش.
• vb = 1٪ از اندازه محور بلوک viewport.
• vmin = کوچکتر از vw یا vh .
• vmax = بزرگتر از vw یا vh .

این واحدها پشتیبانی خوبی از مرورگر دارند.

نیاز به واحدهای نمای جدید

در حالی که واحدهای موجود روی دسکتاپ به خوبی کار می کنند، در دستگاه های تلفن همراه داستان متفاوتی است. در آنجا، اندازه ویوپورت تحت تأثیر وجود یا عدم وجود نوار ابزار پویا است. اینها رابط های کاربری مانند نوار آدرس و نوار برگه هستند.

اگرچه اندازه ویوپورت می تواند تغییر کند، اندازه های vw و vh تغییر نمی کنند. در نتیجه، عناصری با اندازه 100vh ولت در ساعت از نمای دید خارج می شوند.

هنگام اسکرول کردن به پایین، این نوار ابزارهای پویا جمع می شوند. در این حالت، عناصری با اندازه 100vh ولت در ساعت، کل نمای را پوشش خواهند داد.

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

• نمای بزرگ : اندازه پورت دید با فرض اینکه هر رابط UA که به صورت پویا گسترش یافته و جمع می شود تا جمع شود.
• Small Viewport : اندازه نما با فرض اینکه هر رابط UA که به صورت پویا گسترش یافته و جمع می شود تا بسط داده شود.

ویوپورت های جدید همچنین دارای واحدهایی هستند که به آنها اختصاص داده شده است:

• واحدهایی که نمای بزرگ را نشان می دهند دارای پیشوند lv هستند. واحدها lvw ، lvh ، lvi ، lvb ، lvmin و lvmax هستند.
• واحدهایی که نمای کوچک را نشان می دهند دارای پیشوند sv هستند. واحدها svw , svh , svi , svb , svmin و svmax هستند .

اندازه‌های این واحدهای درصد مشاهده ثابت (و در نتیجه پایدار) هستند، مگر اینکه اندازه خود درگاه نمایش تغییر کند.

علاوه بر نمای بزرگ و کوچک، یک نمای پویا نیز وجود دارد که رابط کاربری UA را در نظر می‌گیرد:

• هنگامی که نوار ابزار پویا گسترش می یابد، نمای پویا برابر با اندازه نمای کوچک است.
• هنگامی که نوار ابزار پویا جمع می شود، نمای پویا برابر با اندازه نمای بزرگ است.

واحدهای همراه آن دارای پیشوند dv هستند: dvw ، dvh ، dvi ، dvb ، dvmin و dvmax . اندازه آنها بین همتایان lv* و sv* خود گیره می شود.

این واحدها در کروم 108 عرضه می شوند و به سافاری و فایرفاکس می پیوندند که از قبل پشتیبانی می کنند.

هشدارها

چند نکته در مورد واحدهای Viewport وجود دارد:

• هیچ یک از واحدهای viewport اندازه نوارهای اسکرول را در نظر نمی گیرند. در سیستم‌هایی که نوارهای اسکرول کلاسیک را فعال کرده‌اند، یک عنصر با اندازه 100vw کمی بیش از حد گسترده خواهد بود. این طبق مشخصات است.

• مقادیر نمای پویا با سرعت 60 فریم بر ثانیه به روز نمی شوند. در همه مرورگرها، با گسترش یا جمع شدن رابط کاربری UA، به‌روزرسانی متوقف می‌شود. حتی برخی از مرورگرها بسته به حرکت مورد استفاده (پیمایش آهسته در مقابل سوایپ) به‌روزرسانی را حذف می‌کنند.

• صفحه کلید روی صفحه (که به عنوان صفحه کلید مجازی نیز شناخته می شود) بخشی از رابط کاربری UA محسوب نمی شود. بنابراین بر اندازه واحدهای viewport تأثیر نمی گذارد. در Chrome می‌توانید رفتاری را انتخاب کنید که در آن وجود صفحه‌کلید مجازی بر واحدهای درگاه دید تأثیر می‌گذارد .

منابع اضافی

برای کسب اطلاعات بیشتر در مورد viewport ها و این واحدها ، این قسمت از HTTP 203 را بررسی کنید. در آن، براموس همه چیز را در مورد نماهای مختلف به جیک می گوید و توضیح می دهد که دقیقاً چگونه اندازه این واحدها تعیین می شود.

مطالب خواندنی اضافی:

• مقادیر CSS 4 مشخصات: طول های مربوط به Viewport
• ورودی وضعیت Chrome
• توضیح Layout Viewport
• توضیح دهنده واحدهای دید