Tarayıcı görünüm alanı boyutları nasıl alınır?

788

Ziyaretçilerime görüntüleri yüksek kalitede görebilmeyi sağlamak istiyorum, pencere boyutunu tespit edebilmemin herhangi bir yolu var mı?

Ya da daha iyisi, tarayıcının JavaScript ile görüntü alanı boyutu? Buradaki yeşil alana bakın:

javascript cross-browser viewport

— Alix Axel
kaynak

10

Yaptığım şey, genellikle% 100 yüksekliğe bir eleman ayarlamak ve yüksekliğini almak. Basit her yerde çalışır.

— Muhammed Umer

1

@MuhammadUmer iyi yakalama! Boyutları almaktan rahatsız olursanız (ve jQuery olmayan cep telefonlarında) getComputedStylegenişletilmiş htmletiketten yapabilirsiniz.

— Dan

Ayrıca, tarayıcılar arası görüntü alanı algılamasını işleyen W kütüphanesini kullanabilirsiniz ;)

— pyrsmk

1328

Çapraz tarayıcı `@media (width)` ve `@media (height)`değerler

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

`window.innerWidth` ve `.innerHeight`

alır CSS viewport @media (width) ve @media (height)hangi kaydırma çubukları bulunur
initial-scaleve yakınlaştırma varyasyonları , mobil değerlerin PPK'nin görsel görünüm olarak adlandırdığı şeye yanlış ölçeklenmesine ve değerlerden daha küçük olmasına neden olabilir@media
yakınlaştırma yerel yuvarlama nedeniyle değerlerin 1 piksel kapalı olmasına neden olabilir
undefined IE8'de

`document.documentElement.clientWidth` ve `.clientHeight`

eşittir CSS görünüm alanı genişliği eksi kaydırma çubuğu genişliği
eşleşir @media (width)ve @media (height)olduğunda hiçbir kaydırma
Aynı şekilde jQuery(window).width() hangi jQuery çağrıları tarayıcı viewport
kullanılabilir çapraz tarayıcı
doküman türü eksikse yanlış

kaynaklar

Çeşitli boyutlar için canlı çıkışlar
verge , tarayıcılar arası görüntüleme alanı tekniklerini kullanır
matchMediaherhangi bir ünitede hassas boyutlar elde etmek için gerçek kullanımlar

— ryanve
kaynak

4

01100001 @ değiştirin $ile verge. Eğer jQuery içine entegre etmek istiyorsanız yapın jQuery.extend(verge). Bakınız: verge.airve.com/#static

— ryanve

4

<!DOCTYPE html>Kodun çalışması için IE8'de (ve belki de diğerlerinde) sayfanın üstünde olması gerektiğini belirtmek istedim .

— Tzury Bar Yochay

6

Mobil cihazlarda genişlik

— Dan

24

Bir şeyi kaçırmadıkça, bu cevap yanlış. Chrome'da, en azından document.documentElement.clientHeightdöner sayfa yüksekliği ise window.innerHeightgetiri görünüm penceresi yüksekliği . Büyük fark.

— Nate

2

farklı ekran boyutu değişkenleri / çözümleri canlı test: ryanve.com/lab/dimensions

— Alex

106

jQuery boyut fonksiyonları

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

— Scott Evernden
kaynak

60

@allyourcode, imkansız, jQuery herkese cevaptır .

— Xeoncross

21

Bu görüntü alanı boyutunu değil, genel belge boyutunu alır. Dene.

— Alejandro García Iglesias

2

Sabit kodlu eklenti araç çubuklarını HTML olarak gösteren tarayıcılar için, özellikle kod üst konumlandırma ve yüzdelerinizde kullanmak istiyorsanız bu çözüm çalışmaz.

— Adib Aroui

7

@AlejandroIglesias: Hayır, ben sadece bu SO sayfasında test ettim. $(window).height();536, $("html").height();döner 10599

— Flimm

2

Uyarı bu boyutlar (farklı tarayıcılarda ve platformlarda farklı boyutlarda olan) kaydırma çubukları içermez ve bu nedenle css medya sorgularıyla eşleşmezler, ancak diğer cevaplar bu sorunu çözer.

— Spencer O'Reilly

75

Sen kullanabilirsiniz window.innerWidth ve window.innerHeight özelliklerini.

innerHeight ve externalHeight

— CMS
kaynak

29

Bu diyagram için IE + 1'de çalışmıyor olsa da: D. Böyle bir soru için, bunlardan daha fazlasına sahip olmamak suç olmalı.

— allyourcode

8

@CMS document.documentElement.clientWidthdaha doğru ve daha geniş çapta desteklenirwindow.innerWidth

— ryanve

6

@ryanve Eğer "daha isabetli" demek istersen "uzaktan bile aynı şeyi yapmazsa" o zaman evet: P

— kutladı

Firefox Beta? Bu müzeye ait bir şey.

— Derek 朕會功夫

@boxed Mobil Safari'de document.documentElement.clientWidthwindow.innerWidth bana belge genişliğini verirken görünüm penceresi genişliğini verir. Evet, bu taraftan.

— John

33

JQuery kullanmıyorsanız çirkinleşir. İşte tüm yeni tarayıcılarda çalışması gereken bir snippet. Davranışlar modda ve IE'de standartlar modunda farklıdır. Bu onunla ilgilenir.

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

— Chetan Sastry
kaynak

8

Bu görüntü alanına değil, sayfanın yüksekliğini sağlamaz mı? Bu sayfanın belirttiği gibi: developer.mozilla.org/tr/DOM/element.clientHeight

— allyourcode

4

Kullandığınız clientHeightüzerinde document.documentElementsize görünüm alanı boyutunu verecek eleman. Belge boyutunu almak için yapmanız gerekir document.body.clientHeight. Chetan'ın açıkladığı gibi, bu davranış modern tarayıcılar için geçerlidir. Test etmek kolaydır. Bir konsolu açın ve document.documentElement.clientHeightbirkaç açık sekmeyi yazın.

— Gajus

13

Bunun kabul edilebilir bir cevabı olduğunu biliyorum, ancak clientWidthiPhone (en azından benim) 320 değil 980 döndürdüğü için işe yaramadığı bir durumla karşılaştım.window.screen.width . Mevcut sitede çalışıyordum, "duyarlı" hale getiriliyordum ve daha büyük tarayıcıları farklı bir meta-görüntü alanı kullanmaya zorlamak zorunda kalıyordum.

Umarım bu birine yardımcı olur, mükemmel olmayabilir, ancak iOs ve Android'deki testlerimde çalışır.

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);

— göz alıcı
kaynak

13

Baktım ve çapraz tarayıcı yolu buldum:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}

<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

Snippet'i genişlet

— user2921779
kaynak

stackoverflow'un kod snippet'ini çevreleyen bir iframe kullanımının sonucu

— Miller

11

JavaScript ile kesin bir cevap bulabildim: The Definitive Guide, 6. Baskı by O'Reilly, s. 391:

Ryanve ve ScottEvernden'in şu anki çözümü çalışmazken, bu çözüm Quirks modunda bile çalışıyor.

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

Ben çizgi sebebini merak gerçeği hariç if (document.compatMode == "CSS1Compat")değil if (d.compatMode == "CSS1Compat"), her şey iyi görünüyor.

— nonopolarity
kaynak

Retina ekran veya Landscape vs Portrait veya meta viewport etiketinden mi bahsediyorsunuz? Sanal pikselleri snowdragonledhk.com/… ' daki gibi kastetmiyor musunuz?

— nonopolarite

1) Yüksek DPI ekranlarından bahsederken, burada açıklanan sanal pikselleri kastediyorum: stackoverflow.com/a/14325619/139361 . Her iPhone ekranı tam olarak 320 sanal piksel genişliğindedir. 2) şunu söylüyorum: a) documentElement.clientWidthiOS'ta cihaz yönü değişikliğine yanıt vermiyor. b) sanal pikseller yerine fiziksel piksel sayısını gösterir (neredeyse işe yaramaz)

— Dan

11

Mobil cihazlarda sanal piksellerde doğru değerleri veren jQuery dışı bir çözüm arıyorsanız ve bunun düz olduğunu window.innerHeightveya document.documentElement.clientHeightsorununuzu çözebileceğini düşünüyorsanız , lütfen önce bu bağlantıyı inceleyin: https://tripleodeon.com/assets/2011/12/ table.html

Geliştirici, sorunu ortaya çıkaran iyi bir test yaptı: Android / iOS, manzara / portre, normal / yüksek yoğunluklu ekranlar için beklenmedik değerler alabilirsiniz.

Şu anki cevabım henüz gümüş kurşun değil (// todo), daha ziyade verilen herhangi bir çözümü bu koddan üretim koduna hızlı bir şekilde kopyalayıp yapıştıracak olanlara bir uyarı.

Mobilde sanal piksellerde sayfa genişliği arıyordum ve tek çalışma kodunun (beklenmedik bir şekilde!) Olduğunu buldum window.outerWidth. Bu tabloyu daha sonra zamanım olduğunda gezinme çubuğu hariç yükseklik veren doğru çözüm için inceleyeceğim.

— Dan
kaynak

10

Bu kod http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ adresinden alınmıştır.

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

Not: genişliği okumak için console.log('viewport width'+viewport().width);

— Xavier Blondel
kaynak

9

Arasında bir fark vardır window.innerHeightve document.documentElement.clientHeight. Birincisi yatay kaydırma çubuğunun yüksekliğini içerir.

— Szépe Viktor
kaynak

1

Cevabınızı işletim sistemlerinde, Retina ekranlarda ve manzara / portre modlarında test ettiniz mi? Bu bağlantı oldukça eski sistemleri kapsar, ancak kodunuzun çalışmadığını kanıtlar: tripleodeon.com/wp-content/uploads/2011/12/table.html

— Dan

6

W3C standartlarına uygun bir çözüm, şeffaf bir div (örneğin, JavaScript ile dinamik olarak) oluşturmak, genişliğini ve yüksekliğini 100vw / 100vh (Viewport birimleri) olarak ayarlamak ve daha sonra offsetWidth ve offsetHeight değerini almak olacaktır. Bundan sonra eleman tekrar çıkarılabilir. Bu, eski tarayıcılarda çalışmaz, çünkü görünüm birimi birimleri nispeten yenidir, ancak bunları umursamıyorsanız, ancak (yakında olacak) standartlarla ilgileniyorsanız, kesinlikle bu şekilde gidebilirsiniz:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

Tabii ki, objNode.style.position = "fixed" ayarlayabilir ve daha sonra genişlik / yükseklik olarak% 100 kullanabilirsiniz - bu aynı etkiye sahip olmalı ve uyumluluğu bir ölçüde geliştirmelidir. Ayrıca, konumun sabit olarak ayarlanması genel olarak iyi bir fikir olabilir, çünkü aksi takdirde div görünmez olacak, ancak kaydırma çubuklarının görünmesine neden olacak bir alan tüketecektir.

— firefall
kaynak

Ne yazık ki, gerçek "W3C - standartlar çözümünüzü" tamamen yok eder: 1) caniuse.com/viewport-units , 2) caniuse.com/#feat=css-fixed . Geliştiricilerin ihtiyacı olan şey, "teorik olarak çalışmalı" değil, çalışan çözümdür.

— Dan

Standartlara güvenebilirsek, tüm bu çapraz tarayıcı çözümlerine bile ihtiyacımız yok. Spesifikasyona cevap veren bir çözüm bir çözüm değildir.

— Derek 朕會功夫

3

Bu şekilde yapıyorum, IE 8 -> 10, FF 35, Chrome 40'ta denedim, tüm modern tarayıcılarda (window.innerWidth tanımlandığı gibi) ve IE 8'de (penceresiz) çok düzgün çalışacaktır. innerWidth) de sorunsuz çalışır, herhangi bir sorun (taşma nedeniyle yanıp sönme gibi: "gizli"), lütfen rapor edin. Bu işlevi sadece bazı duyarlı araçlar için geçici olarak yapmak için yaptığımdan, görünüm yüksekliğiyle ilgilenmiyorum, ancak uygulanabilir. Umarım yardımcı olur, yorum ve önerilerinizi takdir ediyorum.

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}

— manolinjr81
kaynak

Tarayıcı görünüm alanı boyutları nasıl alınır?

Çapraz tarayıcı @media (width) ve @media (height)değerler

window.innerWidth ve .innerHeight

document.documentElement.clientWidth ve .clientHeight

kaynaklar

Çapraz tarayıcı `@media (width)` ve `@media (height)`değerler

`window.innerWidth` ve `.innerHeight`

`document.documentElement.clientWidth` ve `.clientHeight`