getWindow

اندازهٔ پنجرهٔ دید را می‌گیرد، در هر مرورگری.

API

getWindow

بازگشت

آرگومان توضیح نوع
ClientRatio شیء اندازهٔ پنجره ClientRatio

ClientRatio

ویژگی توضیح نوع
width پهنای پنجره (پیکسل) number
height بلندای پنجره (پیکسل) number

پارامترها

بدون پارامتر

نمونه

کاربرد پایه

import { getWindow } from 'ranuts';

const windowSize = getWindow();
console.log('پهنای پنجره:', windowSize.width);
console.log('بلندای پنجره:', windowSize.height);

چیدمان واکنش‌گرا

import { getWindow } from 'ranuts';

function handleResize() {
  const { width, height } = getWindow();
  if (width < 768) {
    // چیدمان موبایل
  } else {
    // چیدمان دسکتاپ
  }
}

window.addEventListener('resize', handleResize);

ایمنی سمت سرور

import { getWindow } from 'ranuts';

// در محیط سرور خطا نمی‌دهد و { width: 0, height: 0 } برمی‌گرداند
const size = getWindow();
console.log(size); // { width: 0, height: 0 }

محاسبهٔ نسبت ابعاد

import { getWindow } from 'ranuts';

const { width, height } = getWindow();
const aspectRatio = width / height;
console.log('نسبت ابعاد:', aspectRatio);

یادداشت‌ها

  1. سازگاری با مرورگرها: از window.innerWidth و window.innerHeight استفاده می‌کند که در همهٔ مرورگرهای امروزی هست.

  2. امن در سمت سرور: در محیط‌های سرور (بدون شیء window) مقدار { width: 0, height: 0 } برمی‌گرداند و خطایی پرتاب نمی‌کند.

  3. همان لحظه: اندازه را در لحظهٔ فراخوانی برمی‌گرداند؛ اگر پنجره تغییر کرد، دوباره صدایش بزنید.

  4. کاربرد: معمولاً در چیدمان‌های واکنش‌گرا، پرس‌وجوهای رسانه‌ای و پایش اندازهٔ پنجره به کار می‌رود.