این واحدهای CSS مربوط به Viewport را یاد بگیرید (100vh، 100dvh، 100lvh، 100svh)

100 ولت ساعت

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

در مرورگرهای دسکتاپ، همه چیز همانطور که انتظار می رود کار می کند.

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

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

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

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

خوشبختانه، CSS مدرن برخی از آنها را فراهم می کند واحدهای مربوط به viewport جدید با پشتیبانی عالی از مرورگر (بیش از 90٪ در زمان نوشتن) که به ما کمک می کند این مشکل را بدون تکیه بر راه حل های جاوا اسکریپت حل کنیم. رفتارشون هم مثل رفتارشونه 100vh در مرورگرهای دسکتاپ، زیرا هیچ رابط UA پویا وجود ندارد. رفتار آنها در دستگاه های تلفن همراه متفاوت است.

100dvh

اولین مورد از این واحدها واحد ارتفاع نمای پویا (dvh).

در اینجا تعریف آن در پیش نویس کاری W3C سند:

را واحدهای درصد نمای پویا(dv*) با توجه به تعریف می شوند اندازه نمای پویا: اندازه نما با در نظر گرفتن پویا از هر UA رابط هایی که به صورت پویا گسترش یافته و جمع می شوند. این به نویسندگان اجازه می‌دهد تا محتوا را به‌گونه‌ای اندازه بگیرند که بتواند دقیقاً در داخل پنجره نمایش قرار گیرد، خواه این رابط‌ها وجود داشته باشند یا نباشند.

ساده ترین راه برای درک رفتار آن، بازدید مجدد از صفحه ما و کلیک بر روی dvh دکمه اعمال 100dvh به بخش قهرمان

چیزی که متوجه خواهید شد این است که به طور پیش فرض، بخش hero به طور کامل ظاهر می شود. سپس، هنگامی که نوار آدرس جمع می شود، ارتفاع بخش را به روز می کند و مانند آن رفتار می کند. 100vh.

با این وجود، از آنجایی که این واحد همیشه سعی می‌کند بدون توجه به وجود نوار ابزار، ارتفاع درگاه دید را مطابقت دهد، باعث یک پرش/فلش فوری روی اسکرول و در نتیجه تغییر موقعیت در محتوای متمرکز ما می‌شود – که مطمئناً آن را به یک جایگزین ایده‌آل برای آن تبدیل نمی‌کند. 100vh در بیشتر موارد و می تواند برای کاربر آزاردهنده و از نظر عملکرد پرهزینه باشد.

100lvh

بعد، واحد ارتفاع نمای بزرگ را داریم (lvh).

در اینجا تعریف آن در پیش نویس کاری W3C سند:

را واحدهای درصد نمای بزرگ(lv*) و واحدهای درصد نمای پیش فرض (v*) با توجه به تعریف می شوند اندازه نمای بزرگ: اندازه نما با فرض هر نوع UA اینترفیس هایی که به صورت پویا گسترش می یابند و جمع می شوند تا جمع شوند. این به نویسندگان اجازه می‌دهد تا اندازه محتوا را به گونه‌ای اندازه‌گیری کنند که تضمین شود درگاه دید را پر کند، با توجه به این که چنین محتوایی ممکن است در پشت چنین رابط‌هایی پنهان شود که وقتی گسترش می‌یابند.

باز هم، ساده ترین راه برای درک رفتار آن، بازدید مجدد از صفحه ما و کلیک بر روی lvh دکمه اعمال 100lvh به بخش قهرمان

چیزی که متوجه خواهید شد این است که بخش ما دقیقاً مانند زمانی که ارتفاع آن تنظیم شده است رفتار می کند 100vh. گفته می شود، به طور پیش فرض، بخش hero به طور کامل ظاهر نمی شود، اما زمانی که نوار آدرس کوچک شود این کار انجام می شود.

به عبارت دیگر، این واحد همیشه بزرگترین و ارتفاع نمای قابل مشاهده را که در اسکرول رخ می‌دهد، زمانی که نوار ابزار کوچک‌ترین است، برمی‌گرداند – که مطمئناً آن را جایگزین ایده‌آلی برای 100vh در زمان نوشتن این مقاله، زیرا هیچ چیز جدیدی ارائه نمی دهد.

100svh

در نهایت، واحد ارتفاع نمای کوچک (svh).

در اینجا تعریف آن در پیش نویس کاری W3C سند:

را واحدهای درصد نمای کوچک (sv*) با توجه به تعریف می شوند اندازه پورت دید کوچک: اندازه نما با فرض هر نوع UA رابط هایی که به صورت پویا گسترش می یابند و جمع می شوند تا بسط داده شوند. این به نویسندگان اجازه می‌دهد تا محتوا را به گونه‌ای اندازه بگیرند که حتی در صورت وجود چنین واسط‌هایی، بتواند در نمای درپورت قرار گیرد، و توجه داشته باشید که وقتی چنین واسط‌هایی جمع می‌شوند، ممکن است چنین محتوایی نمای پورت را پر نکند.

یک بار درسود، لطفا با مراجعه مجدد به صفحه ما، رفتار آن را بررسی کنید کلیک کردن بر روی svh دکمه اعمال 100svh به بخش قهرمان

چیزی که متوجه خواهید شد این است که بخش ما همیشه قابل مشاهده خواهد بود و مانند حالت اولیه (قبل از پیمایش) رفتار خواهد کرد. 100dvh.

به عبارت دیگر، این واحد همیشه کوچکترین ارتفاع نمای قابل مشاهده را که هنگام گسترش نوار ابزار رخ می دهد، برمی گرداند – که مطمئناً آن را به یک جایگزین ایده آل برای 100vh در زمان نگارش این مقاله

بازگشت به عقب

اگر از هر یک از واحدهای قبلی راضی هستید و می خواهید از آن استفاده کنید، اما در عین حال نیاز به بازگشت به نسخه قبلی دارید. 100vh واحد فقط برای ایمن تر بودن، چیزی شبیه به این CSS قدیمی را امتحان کنید:

1

.hero {

2

  height: 100svh;

3

  height: 100vh;

4

}

به این ترتیب، مرورگرهایی که پشتیبانی نمی‌شوند، اولین مقدار ویژگی را نادیده می‌گیرند.

نتیجه

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

بیایید در مورد رفتار مرورگرهای تلفن همراه خلاصه کنیم:

• تنظیمات 100vh یا 100lvh به یک بخش همان نتیجه را ایجاد می کند. این بخش دارای یک ارتفاع ثابت خواهد بود (مگر اینکه اندازه نمای را تغییر دهیم)، اما نمی‌توانیم آن را کاملاً ببینیم مگر اینکه اسکرول کنیم و نوار آدرس کوچک شود.
• تنظیمات 100dvh به یک بخش به این معنی است که ارتفاع ثابتی نخواهد داشت اما در حین حرکت دوباره محاسبه می شود. در نتیجه، عناصر داخل آن بخش ممکن است تغییر مکان دهند. رفتار آن می تواند تحت سناریوهای خاصی مفید باشد، اما ممکن است برای کاربر آزاردهنده باشد.
• تنظیمات 100svh به یک بخش به این معنی است که همیشه یک ارتفاع ثابت خواهد داشت (مگر اینکه اندازه نمای را تغییر دهیم) که برابر با ارتفاع نمای اولیه (قبل از اسکرول) خواهد بود – وقتی نوار آدرس باز شود. این بخش به طور پیش فرض کاملاً مانند حالت اولیه قابل مشاهده خواهد بود 100dvh.

توصیه من، در حال حاضر، ایجاد بخش های قهرمان تمام صفحه با 100svh و بازگشتی به 100vh.

مثل همیشه، خیلی ممنون که خواندید!