اندازه پنجره (innerWidth و innerHeight) در JavaScript
در برنامه نویسی وب، ممکن است نیاز داشته باشید تا اندازه پنجره مرورگر را برای انجام عملیات مختلف در نظر بگیرید. برای رسیدن به این هدف، اندازه پنجره مرورگر را با استفاده از خصوصیت های innerWidth و innerHeight در JavaScript محاسبه می کنیم.
خصوصیت innerWidth اندازه پنجره مرورگر را بدون محدودیت مرزهای نوار ابزار و نوار پیمایش (scrollbar) محاسبه می کند. این خصوصیت از نوع number است و واحد پیکسل را نشان می دهد.
خصوصیت innerHeight نیز به همین شکل عمل می کند، با این تفاوت که اندازه ای که محاسبه می شود، از بالا تا پایین پنجره مرورگر است.
برای محاسبه اندازه کلی پنجره مرورگر، می توانید این دو خصوصیت را جمع کنید:
“`
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let windowSize = windowWidth + “x” + windowHeight;
“`
در کد بالا، ابتدا خصوصیت های innerWidth و innerHeight را با استفاده از window.innerWidth و window.innerHeight به ترتیب در متغیر های windowWidth و windowHeight ذخیره می کنیم. سپس با استفاده از این دو متغیر، اندازه کلی پنجره را در متغیر windowSize ذخیره می کنیم.
اگر می خواهید اندازه پنجره مرورگر را در طول زمان نظارت کنید، می توانید از رویداد resize استفاده کنید که به طور خودکار هنگامی که اندازه پنجره تغییر می کند، فراخوانی می شود:
“`
window.addEventListener(‘resize’, function() {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let windowSize = windowWidth + “x” + windowHeight;
console.log(windowSize);
});
“`
در کد بالا، یک رویداد resize به window اضافه شده است که هرگاه اندازه پنجره تغییر پیدا کند، تابع مربوط به آن فراخوانی می شود. در این تابع، محاسبه اندازه پنجره به صورت قبلی تکرار شده و در خروجی نمایش داده می شود.
خلاصه:
– خصوصیت innerWidth اندازه پنجره مرورگر را بدون در نظر گرفتن مرزهای نوار ابزار و نوار پیمایش محاسبه می کند.
– خصوصیت innerHeight نیز به همین شکل عمل می کند، با این تفاوت که اندازه ای که محاسبه می شود، از بالا تا پایین پنجره مرورگر است.
– برای محاسبه اندازه کلی پنجره مرورگر، خصوصیت های innerWidth و innerHeight را با هم جمع کنید.
– برای اطلاعات بیشتر و نظارت بر تغییر اندازه پنجره، از رویداد resize استفاده کنید.
