จะตรวจสอบความละเอียดของหน้าจอด้วย JavaScript ได้อย่างไร?

มีวิธีที่ใช้ได้กับเบราว์เซอร์ทั้งหมดหรือไม่

คำตอบเดิม

ใช่.

window.screen.availHeight
window.screen.availWidth

อัปเดต 2017-11-10

จากสึนามิในความคิดเห็น:

เพื่อให้ได้ความละเอียดพื้นเมืองของเช่นโทรศัพท์มือถือที่คุณต้องคูณด้วยอัตราส่วนพิกเซลอุปกรณ์: และwindow.screen.width * window.devicePixelRatio window.screen.height * window.devicePixelRatioสิ่งนี้จะทำงานบนเดสก์ท็อปซึ่งจะมีอัตราส่วน 1

และจากเบ็นในคำตอบอื่น:

ใน vanilla JavaScript สิ่งนี้จะให้ความกว้าง / ความสูงที่มีให้คุณ:

window.screen.availHeight
window.screen.availWidth

สำหรับความกว้าง / ความสูงสัมบูรณ์ให้ใช้:

window.screen.height
window.screen.width

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

ในวานิลลา JavaScript นี้จะให้คุณพร้อมใช้งานกว้าง / สูง:

window.screen.availHeight
window.screen.availWidth

สำหรับความกว้าง / ความสูงสัมบูรณ์ให้ใช้:

window.screen.height
window.screen.width

ทั้งสองข้างต้นสามารถเขียนได้โดยไม่มีคำนำหน้าหน้าต่าง

ชอบ jQuery ไหม? สิ่งนี้ใช้ได้ในทุกเบราว์เซอร์ แต่เบราว์เซอร์แต่ละตัวมีค่าที่แตกต่าง

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

คุณยังสามารถรับความกว้างและความสูงของ WINDOW ได้โดยหลีกเลี่ยงแถบเครื่องมือของเบราว์เซอร์และ ... (ไม่ใช่แค่ขนาดหน้าจอ)

ในการทำเช่นนี้ให้ใช้: window.innerWidth และ window.innerHeightคุณสมบัติ ดูมันที่ w3schools

ในกรณีส่วนใหญ่มันจะเป็นวิธีที่ดีที่สุดเช่นในการแสดงกล่องโต้ตอบลอยโมดัลกึ่งกลางอย่างสมบูรณ์ มันช่วยให้คุณสามารถคำนวณตำแหน่งบนหน้าต่างได้ไม่ว่าจะใช้การวางแนวความละเอียดหรือขนาดหน้าต่างใดก็ตาม

คุณหมายถึงความละเอียดการแสดงผล (เช่น 72 จุดต่อนิ้ว) หรือขนาดพิกเซล (หน้าต่างเบราว์เซอร์ปัจจุบันคือ 1,000 x 800 พิกเซล) หรือไม่

ความละเอียดหน้าจอช่วยให้คุณทราบว่าความหนาของเส้น 10 พิกเซลเป็นนิ้ว ขนาดพิกเซลบอกให้คุณทราบว่าเปอร์เซ็นต์ความสูงของหน้าจอที่มีอยู่นั้นจะถูกถ่ายด้วยเส้นแนวนอนกว้าง 10 พิกเซล

ไม่มีวิธีที่จะทราบความละเอียดของการแสดงผลจาก Javascript เนื่องจากคอมพิวเตอร์มักจะไม่ทราบขนาดที่แท้จริงของหน้าจอเพียงจำนวนพิกเซล 72 dpi เป็นปกติเดา ....

โปรดทราบว่ามีความสับสนมากมายเกี่ยวกับความละเอียดของการแสดงผลซึ่งบ่อยครั้งที่ผู้คนใช้คำศัพท์แทนความละเอียดของพิกเซล ดูWikipedia

แน่นอนคุณยังสามารถวัดความละเอียดเป็นจุดต่อซม. นอกจากนี้ยังมีวัตถุที่ไม่ชัดเจนของจุดที่ไม่ได้เป็นสแควร์ แต่ฉันเชือนแช

การใช้ jQuery คุณสามารถทำได้:

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

การพยายามรับสิ่งนี้บนอุปกรณ์พกพาต้องใช้ขั้นตอนอีกสองสามขั้น screen.availWidthยังคงเหมือนเดิมโดยไม่คำนึงถึงทิศทางของอุปกรณ์

นี่คือทางออกของฉันสำหรับมือถือ:

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

ดูรับความละเอียดหน้าจอมอนิเตอร์ด้วย Javascriptและwindow.screenวัตถุ

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

สำหรับการอ้างอิงในอนาคต:

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

หากคุณต้องการที่จะตรวจสอบความละเอียดหน้าจอคุณอาจต้องการที่จะชำระเงินปลั๊กอินละเอียด อนุญาตให้คุณทำสิ่งต่อไปนี้:

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

นี่คือบางส่วนที่ดีคบมติจากไรอันแวน Etten เขียนปลั๊กอิน:

• มี 2 ​​ชุดหน่วยและแตกต่างกันในระดับคงที่: หน่วยอุปกรณ์และหน่วย CSS
• ความละเอียดจะคำนวณตามจำนวนจุดที่สามารถปรับได้ตามความยาว CSS เฉพาะ
• การแปลงหน่วย: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
• CSS มีความยาวสัมพัทธ์และความยาวสัมบูรณ์ ในการซูมปกติ: 1⁢em = 16⁢px
• dppx เทียบเท่ากับอัตราส่วนพิกเซลของอุปกรณ์
• นิยาม devicePixelRatio แตกต่างกันตามแพลตฟอร์ม
• ข้อความค้นหาสื่อสามารถกำหนดเป้าหมายความละเอียดขั้นต่ำได้ ใช้ด้วยความระมัดระวัง

นี่คือซอร์สโค้ดสำหรับ res ณ วันนี้:

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