JavaScript ile ekran çözünürlüğü nasıl algılanır?

Tüm tarayıcılar için uygun bir yol var mı?

orijinal cevap

Evet.

window.screen.availHeight
window.screen.availWidth

2017-11-10 güncellemesi

Gönderen Tsunamiler yorumlarda:

Bir mobil cihazın doğal çözünürlüğünü almak için cihaz piksel oranı ile çarpmanız gerekir: window.screen.width * window.devicePixelRatiove window.screen.height * window.devicePixelRatio. Bu, 1 oranına sahip masaüstlerinde de çalışacaktır.

Ve başka bir cevapta Ben'den :

Vanilya JavaScript'te, bu size MEVCUT genişlik / yükseklik verecektir:

window.screen.availHeight
window.screen.availWidth

Mutlak genişlik / yükseklik için şunları kullanın:

window.screen.height
window.screen.width

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

Vanilya JavaScript'te, bu size MEVCUT genişlik / yükseklik verecektir :

window.screen.availHeight
window.screen.availWidth

Mutlak genişlik / yükseklik için şunları kullanın:

window.screen.height
window.screen.width

Yukarıdakilerin her ikisi de pencere öneki olmadan yazılabilir.

JQuery gibi mi? Bu tüm tarayıcılarda çalışır, ancak her tarayıcı farklı değerler verir.

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

Ayrıca WINDOW genişliğini ve yüksekliğini elde edebilir, tarayıcı araç çubuklarından ve ... (sadece ekran boyutunu değil) kaçınabilirsiniz.

Bunu yapmak için: window.innerWidth ve window.innerHeightözelliklerini kullanın . W3schools'da görün .

Çoğu durumda, örneğin, mükemmel bir şekilde ortalanmış kayan modsal iletişim kutusu görüntülemek en iyi yol olacaktır. Tarayıcıyı hangi çözünürlük yönü veya pencere boyutu kullanıyor olursa olsun, pencere üzerindeki konumları hesaplamanızı sağlar.

Ekran çözünürlüğü mü (örn. İnç başına 72 nokta) veya piksel boyutlarını (tarayıcı penceresi şu anda 1000 x 800 piksel)?

Ekran çözünürlüğü, 10 piksellik bir çizginin inç cinsinden ne kadar kalın olacağını bilmenizi sağlar. Piksel boyutları, mevcut ekran yüksekliğinin yüzde kaçının 10 piksel genişliğinde yatay bir çizgi tarafından alınacağını gösterir.

Ekran çözünürlüğünü sadece Javascript'ten bilmenin bir yolu yoktur, çünkü bilgisayarın kendisi genellikle ekranın gerçek boyutlarını, sadece piksel sayısını bilmez. 72 dpi olağan tahmin olduğunu ....

Ekran çözünürlüğü hakkında çok fazla karışıklık olduğunu unutmayın, genellikle insanlar piksel çözünürlüğü yerine terimi kullanır, ancak ikisi oldukça farklıdır. Wikipedia'ya bakın

Tabii ki, çözünürlüğü cm başına nokta cinsinden de ölçebilirsiniz. Ayrıca kare olmayan noktaların belirsiz konusu var. Ama konuţuyorum.

JQuery kullanarak şunları yapabilirsiniz:

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

Bunu bir mobil cihazdan almaya çalışmak birkaç adım daha gerektirir. screen.availWidthcihazın yönüne bakılmaksızın aynı kalır.

İşte mobil cihazlar için çözümüm:

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

Bkz. Javascript ve nesne ile Monitör Ekran Çözünürlüğü Almawindow.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;
}

sadece ileride başvurmak üzere:

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

Ekran çözünürlüğünü tespit etmek istiyorsanız, eklentinin res'unu kontrol etmek isteyebilirsiniz . Aşağıdakileri yapmanızı sağlar:

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

Eklentinin yazarı Ryan Van Etten'den bazı harika çözüm önerileri :

• 2 birim seti vardır ve sabit bir ölçekte farklılık gösterir: cihaz birimleri ve CSS birimleri.
• Çözünürlük, belirli bir CSS uzunluğuna sığabilecek nokta sayısı olarak hesaplanır.
• Birim dönüşümü: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
• CSS'nin göreceli ve mutlak uzunlukları vardır. Normal zumda: 1⁢em = 16⁢px
• dppx, cihaz-piksel oranına eşdeğerdir.
• devicePixelRatio tanımı platforma göre değişir.
• Medya sorguları minimum çözünürlüğü hedefleyebilir. Hız için dikkatli kullanın.

Bugün için res kaynak kodu:

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