Bagaimana cara mendeteksi resolusi layar dengan JavaScript?


196

Apakah ada cara yang berfungsi untuk semua browser?

Jawaban:


296

jawaban asli

Iya.

window.screen.availHeight
window.screen.availWidth

perbarui 2017-11-10

Dari Tsunami di komentar:

Untuk mendapatkan resolusi asli yaitu perangkat seluler, Anda harus mengalikannya dengan rasio piksel perangkat: window.screen.width * window.devicePixelRatiodan window.screen.height * window.devicePixelRatio. Ini juga akan berfungsi pada desktop, yang akan memiliki rasio 1.

Dan dari Ben dalam jawaban lain:

Dalam vanilla JavaScript, ini akan memberi Anda lebar / tinggi yang TERSEDIA:

window.screen.availHeight
window.screen.availWidth

Untuk lebar / tinggi absolut, gunakan:

window.screen.height
window.screen.width

16
Itu tidak sepenuhnya benar sekarang. Itu tidak mempertimbangkan kemungkinan perubahan zoom halaman.
sergzach

7
@ergergach - Dalam hal ini saya akan menggunakan jQuery $(window).width()sebagai gantinya, lihat jawaban
chaim.dev

3
Gunakan window.screen.height dan window.screen.width untuk mendapatkan ukuran layar yang tepat (seperti yang disarankan dalam jawaban berikutnya). Alasan Anda tidak mendapatkan ukuran yang tepat adalah karena memeriksa lebar dan tinggi yang tersedia, ini berarti akan mengurangi ketinggian bilah alat (yang persis 40px pada windows 7/8)
Jaruba

4
Tidak akan lebih baik, untuk resolusi layar untuk pergi dengan window.screen.height dan lebar? mengapa tersedia availWidth saya misalnya, akan mengembalikan 1050, padahal sebenarnya 1080.
Malavos

5
@ cek yang harus Anda gandakan window.devicePixelRatio. Lihat komentar saya pada jawaban Alessandros.
Tsunami

49
var width = screen.width;
var height = screen.height;

1
Ini setara dengan window.screen. Seharusnya tambahkan saja ke jawaban yang ada.
Gajus

3
Sebenarnya ini jawaban yang benar. screen.availHeighthanya memberikan ketinggian yang tersedia di jendela browser sementara screen.heightmemberikan ketinggian layar yang tepat.
buka puasa

Ini mengembalikan resolusi skala dpi, bukan resolusi layar asli.
Dominic Cerisano

4
Untuk mendapatkan resolusi asli yaitu perangkat seluler, Anda harus mengalikannya dengan rasio piksel perangkat: window.screen.width * window.devicePixelRatiodan window.screen.height * window.devicePixelRatio. Ini juga akan berfungsi pada desktop, yang akan memiliki rasio 1.
Tsunami

Komputer desktop tidak harus memiliki rasio 1.
12Me21

34

Dalam vanilla JavaScript, ini akan memberi Anda lebar / tinggi yang TERSEDIA :

window.screen.availHeight
window.screen.availWidth

Untuk lebar / tinggi absolut, gunakan:

window.screen.height
window.screen.width

Kedua hal di atas dapat ditulis tanpa awalan jendela.

Suka jQuery? Ini berfungsi di semua browser, tetapi setiap browser memberikan nilai yang berbeda.

$(window).width()
$(window).height()

19

Apakah yang Anda maksud resolusi layar (misalnya 72 titik per inci) atau dimensi piksel (jendela browser saat ini 1000 x 800 piksel)?

Resolusi layar memungkinkan Anda untuk mengetahui seberapa tebal garis 10 piksel dalam inci. Dimensi piksel memberi tahu Anda berapa persen dari tinggi layar yang tersedia akan diambil oleh garis horizontal lebar 10 piksel.

Tidak ada cara untuk mengetahui resolusi tampilan hanya dari Javascript karena komputer itu sendiri biasanya tidak tahu dimensi layar yang sebenarnya, hanya jumlah piksel. 72 dpi adalah tebakan biasa ....

Perhatikan bahwa ada banyak kebingungan tentang resolusi layar, seringkali orang menggunakan istilah ini daripada resolusi piksel, tetapi keduanya sangat berbeda. Lihat Wikipedia

Tentu saja, Anda juga dapat mengukur resolusi dalam titik per cm. Ada juga subjek yang tidak jelas dari titik-titik non-kuadrat. Tapi saya ngelantur.


19

Menggunakan jQuery dapat Anda lakukan:

$(window).width()
$(window).height()

Ini adalah solusi lintas / termudah yang pernah saya gunakan. Setidaknya untuk lebar peramban ...
Zarne Dravitzki

34
Ini mengembalikan ukuran jendela, bukan resolusi layar.
Jonas

19

Anda juga bisa mendapatkan WINDOW lebar dan tinggi, menghindari bilah alat browser dan ... (bukan hanya ukuran layar).

Untuk melakukan ini, gunakan: window.innerWidth dan window.innerHeightproperti. Lihat di w3schools .

Dalam kebanyakan kasus itu akan menjadi cara terbaik, misalnya, untuk menampilkan dialog modal mengambang terpusat sempurna. Ini memungkinkan Anda untuk menghitung posisi di jendela, terlepas dari orientasi resolusi atau ukuran jendela mana yang menggunakan browser.


1
Ini adalah solusi yang paling berguna. Properti window.screen.availWidth memberikan SCREEN, bukan viewport, yang mungkin berbeda. Lebih bermanfaat bagi saya untuk mengetahui berapa banyak real estat yang sebenarnya bisa saya gunakan, bukan seperti apa browser itu.
Mike Mannakee

13

Mencoba mendapatkan ini di perangkat seluler memerlukan beberapa langkah lagi. screen.availWidthtetap sama terlepas dari orientasi perangkat.

Inilah solusi saya untuk seluler:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

window.orientationmengembalikan undefined ... (Firefox 49) screen.orientation.anglemengembalikan sudut, tetapi sudah di 0 untuk mode lansekap.
Lambart


4
function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

4

hanya untuk referensi di masa mendatang:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

3

Jika Anda ingin mendeteksi resolusi layar, Anda mungkin ingin checkout res plugin . Ini memungkinkan Anda untuk melakukan hal berikut:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Berikut adalah beberapa takeaways resolusi hebat dari Ryan Van Etten, penulis plugin:

  • 2 set unit ada dan berbeda pada skala tetap: unit perangkat dan unit CSS.
  • Resolusi dihitung sebagai jumlah titik yang dapat masuk sepanjang panjang CSS tertentu.
  • Konversi unit: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
  • CSS memiliki panjang relatif dan absolut. Dalam zoom normal: 1⁢em = 16⁢px
  • dppx setara dengan rasio perangkat-piksel.
  • definisi devicePixelRatio berbeda berdasarkan platform.
  • Kueri media dapat menargetkan resolusi minimum. Gunakan dengan hati-hati untuk kecepatan.

Berikut kode sumber untuk res, mulai hari ini:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.