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?
Jawaban:
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() );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.
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)
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
getWidth()referensi fungsiself.innerHeight
Ini menyebalkan . Saya sarankan melewatkan omong kosong dan menggunakan jQuery , yang memungkinkan Anda melakukannya $(window).width().
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 ()
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.
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>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;
}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);
};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.