Bagaimana cara mendapatkan lebar browser menggunakan kode JavaScript?

180

Saya mencoba menulis fungsi JavaScript untuk mendapatkan lebar browser saat ini.

Saya menemukan ini:

javascript:alert(document.body.offsetWidth);

Namun masalah itu gagal jika tubuh memiliki lebar 100%.

Apakah ada fungsi lain yang lebih baik atau solusi?

javascript jquery html css Amr Elgarhy
sumber

Jawaban:

133

Pembaruan untuk 2017

Jawaban asli saya ditulis pada tahun 2009. Ketika masih berfungsi, saya ingin memperbaruinya untuk tahun 2017. Browser masih dapat berperilaku berbeda. Saya percaya tim jQuery untuk melakukan pekerjaan dengan baik dalam menjaga konsistensi lintas-browser. Namun, tidak perlu menyertakan seluruh perpustakaan. Di sumber jQuery, bagian yang relevan ditemukan pada baris 37 dari dimensional.js . Di sini diekstraksi dan dimodifikasi untuk bekerja mandiri:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );
Luaskan cuplikan

Jawaban Asli

Karena semua browser berperilaku berbeda, Anda harus menguji nilai terlebih dahulu, dan kemudian menggunakan yang benar. Inilah fungsi yang melakukan ini untuk Anda:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

dan juga untuk ketinggian:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Panggil kedua hal ini dalam skrip Anda menggunakan getWidth()atau getHeight(). Jika tidak ada properti asli browser yang ditentukan, itu akan kembali undefined.

Travis
sumber
11
Jawaban terbaik karena saya tidak perlu menyertakan perpustakaan 33k untuk pengalihan sederhana berdasarkan lebar jendela browser
David Aguirre
1
Ini menghasilkan hasil yang benar (atau yang diharapkan) secara konsisten dibandingkan dengan implementasi jQuery.
Emmanuel John
3
... masing-masing dari ketiga ini menunjukkan beberapa hasil dan semua hasil (lebar) berbeda. Misalnya dengan Google Chrome lihat self.innerWidth 423, document.documentElement.clientWidth 326dan document.body.clientWidth 406. Dalam pertanyaan kasus seperti itu: mana yang benar dan mana yang digunakan? Misalnya saya ingin mengubah ukuran google map. 326 atau 423 perbedaan besar. Jika lebar ~ 700, maka lihat 759, 735, 742 (perbedaan tidak begitu besar)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);dan var windowWidth = self.innerWidth || -1;// karena "tubuh" atau "layar" atau "dokumen" bukan "jendela" jika Anda memeriksa konten html yang meluap-luap, Anda dapat mengerti. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın
1
salin-tempel kesalahan dalam contoh Anda, getWidth()referensi fungsiself.innerHeight
theGecko
309

Ini menyebalkan . Saya sarankan melewatkan omong kosong dan menggunakan jQuery , yang memungkinkan Anda melakukannya $(window).width().

kekacauan
sumber
2
Jika saya mengingatnya dengan benar, jQuery telah menarik banyak dimensi ke dalam inti. Apakah Anda masih membutuhkan dimensi untuk melakukan apa yang Anda sarankan?
Nosredna
Ternyata kamu tidak. Itu luar biasa. Jawaban yang diedit per. Terimakasih atas peringatannya.
kekacauan
6
Dukungan $ (window) .width () di jQuery adalah sejak versi 1.2, seandainya itu relevan bagi siapa saja.
kekacauan
18
Saya telah menemukan bahwa $ (window) .width () tidak selalu mengembalikan nilai yang sama dengan innerWidth / clientWidth seperti contoh dalam jawaban di bawah ini. Versi jQuery tidak memasukkan scrollbar browser ke akun (dalam FF tetap). Ini menyebabkan saya banyak kebingungan dengan permintaan CSS @media muncul untuk memicu pada lebar yang salah. Menggunakan kode asli tampaknya lebih dapat diandalkan karena memperhitungkan tampilan scrollbar.
Coder
5
Menambahkan 30k baris kode untuk mendapatkan lebar jendela adalah solusi BURUK!
codechimp
49 
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Keduanya mengembalikan bilangan bulat dan tidak memerlukan jQuery. Kompatibel lintas browser.

Saya sering menemukan jQuery mengembalikan nilai yang tidak valid untuk width () dan height ()

Bradley Flood
sumber
1
Mengalami kesulitan menggunakan ini di Safari iphone.
nu everest
17

Mengapa tidak ada yang menyebutkan matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Tidak menguji sebanyak itu, tetapi diuji dengan android default dan browser chrome android, desktop chrome, sejauh ini sepertinya berfungsi dengan baik.

Tentu saja itu tidak mengembalikan nilai angka, tetapi mengembalikan boolean - jika cocok atau tidak, jadi mungkin tidak persis sesuai dengan pertanyaan tetapi itulah yang kami inginkan dan mungkin penulis pertanyaan inginkan.

Darius.V
sumber
1
Hanya mendukung IE10 +.
qarthandso
17
Jika mereka menggunakan IE9 atau lebih lama, mereka tidak layak mendapatkan internet.
Darius.V
Safari iphone sepertinya tidak mendukung ini.
nu everest
Versi iOS Safari yang lebih baru harus mendukung matchMedia. Sumber: caniuse.com/#feat=matchmedia
vargr
8

Dari W3schools dan peramban silangnya kembali ke zaman kegelapan IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
pengguna3651121
sumber
Pendekatan ini bekerja dengan indah dan bisa menjadi jawaban yang diterima, karena jauh lebih pendek daripada solusi lain (selain menggunakan jQuery).
Simon Steinberger
2
Tidakkah akan terjadi kesalahan jika document.documentElement tidak terdefinisi?
PhiLho
6

Berikut adalah versi lebih pendek dari fungsi yang disajikan di atas:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
ismael
sumber
4
Yang gagal mengembalikan nilai jika semua kondisinya salah.
Mike C
10
Anda tidak perlu elses :)
Nick
0

Solusi yang disesuaikan dengan JS modern dari jawaban Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Sergiu
sumber
0

Tambahan penting untuk jawaban Travis; Anda perlu memasang getWidth () di badan dokumen untuk memastikan bahwa lebar bilah gulir dihitung, jika tidak, lebar bilah gulir di browser dikurangi dari getWidth (). Apa yang saya lakukan ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

dan memanggil variabel Lebar di mana saja setelahnya.

burkul
sumber