Bagaimana cara mendeteksi resolusi layar dengan JavaScript?

Apakah ada cara yang berfungsi untuk semua browser?

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

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

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()

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.

Menggunakan jQuery dapat Anda lakukan:

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

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.

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;
};

Lihat Dapatkan Resolusi Layar Monitor dengan Javascript dan window.screenobjek

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;
}

hanya untuk referensi di masa mendatang:

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

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}
});