اندازه صفحه نمایش

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

100% Click to see in Pixel
100vw Click to see in Pixel
--view-width Click to see in Pixel

در ظاهر اندازه ها مانند هم هستند. ولی دقت کنید در گزینه اول و دوم تفاوت در اندازه است برای دیدن اندازه دقیق روی هر گزینه کلیک کنید تا به پیکسل نمایش داده شود.

دلیل وجود اسکرول بار است.

در مثال زیر به نسبت اندازه ها دقت کنید.

height:calc(100% * 0.05)
height:calc(100vw * 0.05)
height:calc(var(--view-width) * 0.05)

توجه داشته باشید اگر هر زمان تغییراتی در اندازه پنجره رخ دهد، مقدار دوباره محاسبه میشود. فقط اگر به صورت دستی شما خصوصیت overflow را تغییر دادید بایستی دوباره اندازه را محاسبه کنید، برای این منظور کافیست تابع WNSetViewSize را فراخوانی کنید. این تابع علاوه بر محاسبه و تنظیم آن در متغییر css مقدار اندازه را نیز برمیگرداند.