Làm cách nào để phát hiện độ phân giải màn hình bằng JavaScript?

Có cách nào hoạt động cho tất cả các trình duyệt không?

câu trả lời gốc

Đúng.

window.screen.availHeight
window.screen.availWidth

cập nhật 2017-11-10

Từ Tsunamis trong các ý kiến:

Để có được độ phân giải gốc của thiết bị di động, bạn phải nhân với tỷ lệ pixel của thiết bị: window.screen.width * window.devicePixelRatiovà window.screen.height * window.devicePixelRatio. Điều này cũng sẽ hoạt động trên máy tính để bàn, sẽ có tỷ lệ 1.

Và từ Ben trong một câu trả lời khác:

Trong vanilla JavaScript, điều này sẽ cung cấp cho bạn chiều rộng / chiều cao CÓ S: N:

window.screen.availHeight
window.screen.availWidth

Đối với chiều rộng / chiều cao tuyệt đối, sử dụng:

window.screen.height
window.screen.width

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

Trong vanilla JavaScript, điều này sẽ cung cấp cho bạn chiều rộng / chiều cao CÓ S : N:

window.screen.availHeight
window.screen.availWidth

Đối với chiều rộng / chiều cao tuyệt đối, sử dụng:

window.screen.height
window.screen.width

Cả hai điều trên có thể được viết mà không có tiền tố cửa sổ.

Giống như jQuery? Điều này hoạt động trong tất cả các trình duyệt, nhưng mỗi trình duyệt cho các giá trị khác nhau.

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

Bạn có nghĩa là độ phân giải màn hình (ví dụ 72 chấm trên mỗi inch) hoặc kích thước pixel (cửa sổ trình duyệt hiện là 1000 x 800 pixel)?

Độ phân giải màn hình cho phép bạn biết một dòng 10 pixel sẽ dày bao nhiêu inch. Kích thước pixel cho bạn biết bao nhiêu phần trăm chiều cao màn hình khả dụng sẽ được chiếm bởi một đường ngang rộng 10 pixel.

Không có cách nào để biết độ phân giải màn hình chỉ từ Javascript vì bản thân máy tính thường không biết kích thước thực của màn hình, chỉ là số pixel. 72 dpi là dự đoán thông thường ....

Lưu ý rằng có rất nhiều nhầm lẫn về độ phân giải màn hình, thường mọi người sử dụng thuật ngữ thay vì độ phân giải pixel, nhưng hai loại này khá khác nhau. Xem Wikipedia

Tất nhiên, bạn cũng có thể đo độ phân giải bằng số chấm trên mỗi cm. Ngoài ra còn có chủ đề tối nghĩa của các chấm không vuông. Nhưng tôi lạc đề.

Sử dụng jQuery bạn có thể làm:

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

Bạn cũng có thể lấy chiều rộng và chiều cao của WINDOW, tránh các thanh công cụ của trình duyệt và ... (không chỉ kích thước màn hình).

Để làm điều này, sử dụng: window.innerWidth và window.innerHeightcác thuộc tính. Xem nó tại w3schools .

Trong hầu hết các trường hợp, đó sẽ là cách tốt nhất, ví dụ, để hiển thị một hộp thoại phương thức nổi tập trung hoàn hảo. Nó cho phép bạn tính toán các vị trí trên cửa sổ, bất kể định hướng độ phân giải hoặc kích thước cửa sổ đang sử dụng trình duyệt.

Cố gắng để có được điều này trên một thiết bị di động đòi hỏi một vài bước nữa. screen.availWidthgiữ nguyên bất kể định hướng của thiết bị.

Đây là giải pháp của tôi cho điện thoại di động:

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

Xem Nhận độ phân giải màn hình màn hình với Javascript và window.screenđối tượng

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

chỉ để tham khảo trong tương lai:

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

Nếu bạn muốn phát hiện độ phân giải màn hình, bạn có thể muốn kiểm tra độ phân giải của plugin . Nó cho phép bạn làm như sau:

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

Dưới đây là một số giải pháp tuyệt vời từ Ryan Van Etten, tác giả của plugin:

• 2 bộ đơn vị tồn tại và khác nhau ở một tỷ lệ cố định: đơn vị thiết bị và đơn vị CSS.
• Độ phân giải được tính bằng số lượng chấm có thể vừa với chiều dài CSS cụ thể.
• Chuyển đổi đơn vị: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
• CSS có độ dài tương đối và tuyệt đối. Ở mức thu phóng bình thường: 1⁢em = 16⁢px
• dppx tương đương với tỷ lệ pixel của thiết bị.
• Định nghĩa devicePixelRatio khác nhau theo nền tảng.
• Truy vấn phương tiện có thể nhắm mục tiêu độ phân giải tối thiểu. Sử dụng cẩn thận cho tốc độ.

Đây là mã nguồn cho độ phân giải, tính đến ngày hôm nay:

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