JavaScript Ekran, Pencere ve Web Sayfası Boyutları

Kullanıcılarınızın ekranının, tarayıcı penceresinin ve web sayfası içeriğinin boyutlarını doğru bir şekilde belirlemek, duyarlı ve kullanıcı dostu web uygulamaları oluşturmak için çok önemlidir. Bu kılavuz, bu üç kavram arasındaki farklılıkları netleştirir ve ilgili boyutlarını almak için güvenilir JavaScript yöntemleri sağlar.

İçindekiler

1. Ekran, Pencere ve Web Sayfası Boyutları Arasındaki Farklılıkları Anlamak
2. JavaScript ile Ekran, Pencere ve Web Sayfası Boyutlarını Alma

Ekran, Pencere ve Web Sayfası Boyutları Arasındaki Farklılıkları Anlamak

Koda geçmeden önce, açık tanımlar belirleyelim:

• Ekran: Kullanıcının cihazının tüm fiziksel ekran alanını temsil eder. Boyutları, monitörün toplam piksel sayısını yansıtır.
• Pencere: Tarayıcı penceresinin kendisini – web sayfanızın görüntülendiği alanı – ifade eder. Tarayıcı en üstte değilse, pencere boyutu ekran boyutundan daha küçük olabilir. Tarayıcı çubuğunu (araç çubukları, menüler vb.) içermez.
• Web Sayfası (Belge): Web sayfanızın işlenmiş içeriğini kapsar. Boyutları, içeriğin boyutuna, düzenine ve stiline bağlıdır. Tarayıcı penceresinden daha küçük veya daha büyük olabilir (kaydırma çubuklarına yol açar).

JavaScript ile Ekran, Pencere ve Web Sayfası Boyutlarını Alma

Bu boyutları JavaScript kullanarak nasıl elde edeceğiniz aşağıda açıklanmıştır:

1. Ekran Boyutu

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`Ekran genişliği: ${screenWidth} piksel`);
console.log(`Ekran yüksekliği: ${screenHeight} piksel`);

2. Pencere Boyutu

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Pencere genişliği: ${windowWidth} piksel`);
console.log(`Pencere yüksekliği: ${windowHeight} piksel`);

3. Web Sayfası (Belge) Boyutu

Web sayfasının tam boyutlarını belirlemek, tarayıcı tutarsızlıkları nedeniyle daha sağlam bir yaklaşım gerektirir. Aşağıdaki fonksiyon çeşitli senaryoları ele alır:

function getDocumentSize() {
  const body = document.body;
  const html = document.documentElement;

  const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
  const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

  return { width: docWidth, height: docHeight };
}

const documentSize = getDocumentSize();
console.log(`Belge genişliği: ${documentSize.width} piksel`);
console.log(`Belge yüksekliği: ${documentSize.height} piksel`);

Bu fonksiyon, tarayıcılar arasındaki farklılıkları hesaba katmak ve görünür görünüm alanının ötesindeki alanlar da dahil olmak üzere işlenmiş içeriğin daha doğru bir ölçümünü sağlamak için farklı özellikleri dikkate alır.

Farklılıkları anlayarak ve bu JavaScript yöntemlerini kullanarak, çeşitli ekran boyutlarına ve pencere yapılandırmalarına sorunsuz bir şekilde uyum sağlayan web uygulamaları oluşturabilirsiniz.