Soru Ekranın boyutunu, geçerli web sayfasını ve tarayıcı penceresini alın


Nasıl alabilirim windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY tüm önemli tarayıcılarda çalışacak?

screenshot describing which values are wanted


1608
2017-08-09 06:28


Menşei


Güzel resim. Bütün sorular olmalı ve cevaplar böyle olmalıdır. - Damien Golding
pageHeight (bir resim) ile alabilirsiniz: document.body.scrollHeight - befzz
görmek https://developer.mozilla.org/en-US/docs/Web/API/Window.screen ve http://www.quirksmode.org/dom/w3c_cssom.html#screenview - rawiro
İlginç: ryanve.com/lab/dimensions - Ring Ø
Yardımcı eğitim - w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh


Cevaplar:


JQuery kullanıyorsanız, jQuery yöntemlerini kullanarak pencerenin boyutunu veya belgeyi alabilirsiniz:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

Ekran boyutu için kullanabilirsiniz screen nesne aşağıdaki şekilde:

screen.height;
screen.width;

1142
2017-08-09 06:39



teşekkürler, ve pageX, pageY, screenX, screenY almak için herhangi bir yolu var mı? - turtledove
JQuery yöntemi height () tüm elemanlar için çalışır gibi görünür ve bir sayı döndürür (46) css ('height') gibi bir dize yerine ("46px"). - Chris
Mobil Safari ile uğraşırken, ne yazık ki jQuery bu soru için mükemmel bir çözüm değildir. # 13 numaralı satırdaki nota bakın. github.com/jquery/jquery/blob/master/src/dimensions.js - Joshua
@ 웃 웃웃 웃웃 cevapta neyi düzenlediniz? revizyonlara göre, hiç bir şey düzenlemediniz - DanFromGermany
@Marco Kerwitz En kötüsü, "javascript pencere genişliğini al" yazdım ve bu cevabın içeriği Google’da idi. Benden büyük bir eksi. - Maciej Krawczyk


Bu bilmeniz gereken her şey:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

ama kısaca:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Keman


816
2017-07-31 15:52



Neden olmasın g = document.body ? - a paid nerd
@apaidnerd: IE8 gibi tarayıcılara meydan okuyan standartlar document.body'yi desteklemiyor. Ancak IE9 yapar. - Michael Mikowski
@MichaelMikowski Bu doğru değil! Hatta IE5 destekler document.body. - Nux
@nux Düzeltilmeye devam ediyorum ve IE8'de desteği doğruladım. Son zamanlarda hedeflediğimiz en az bir tarayıcının belgeyi desteklemediğini ve getElementsByTagName yaklaşımını kullanmak için değiştirmem gerektiğini biliyorum. Ama sanırım tarayıcıyı yanlış hatırlıyorum. Afedersiniz! - Michael Mikowski
Kısa değil, açıklama yok. Hiçbir suçu şu anda siteye erişemiyorum. - Adi Prasetyo


İşte saf çapraz tarayıcı çözümü JavaScript (Kaynak):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

367
2018-01-30 17:44



Bu daha iyidir çünkü eğer betiği yükleme işleminde (genellikle fikir) yeterince erken çağırırsanız, o zaman body elementbir değer döndürecek undefined henüz dom yüklü değil. - dgo
HA! Eski iş parçacığı ama bunun için teşekkürler! Sanırım makinelerini ateş edinceye kadar XP'yi kullanmayı bırakmayacak olan eski ev kullanıcılarının yararına, mümkün olduğunda en azından IE8'e destek vermeye çalışan eski “aptallardan” biriyim. Soru sormaktan ve cevap almak yerine, sadece "STOP DESTEKLEME IE8!" Yorum olarak Yine teşekkürler! Bu benim yaptığım saf bir javascript fotoğraf yakınlaştırma benim için bir sorun çözüldü. Onun IE8 biraz yavaş, ama şimdi en azından çalışıyor! :-) - Randy


Kullanılabilir ekran boyutunu elde etmek için jQuery olmayan bir yol. window.screen.width/height zaten hazırlandı, ama duyarlı web tasarımı ve bütünlüğü uğruna uğruna bu özellikleri bahsetmeye değer düşünüyorum:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth ve availHeight - Mevcut genişlik ve yükseklik   ekran (OS görev çubukları ve benzeri hariç).


77
2018-06-20 10:06



genişlik screen.height aynı - android krom tarayıcıda piksel oranına göre bölünme gösterir :( - Darius.V
window.screen.availHeight Tam ekran modunu üstlenecek gibi görünüyor, böylece normal ekran modu kaydırma yapıyor (Firefox ve Chrome'da test ediliyor). - Suzana
@Suzana_K sonra kullanın window.screen.height yerine. - Vallentin


Ancak duyarlı ekranlar hakkında konuştuğumuzda ve jQuery'yi bir sebepten dolayı kullanmak istiyorsak,

window.innerWidth, window.innerHeight

Doğru ölçüm verir. Kaydırma çubuğunun ekstra alanını bile kaldırır ve bu alanı ayarlamaya çalışmak zorunda değiliz :)


48
2018-04-22 07:29



Bu desteklerin bir sürü ile kabul edilen cevap olmalı. Şu anda kabul edilen cevaptan çok daha yararlı bir cevap ve ayrıca jQuery'ye bağlı değil. - developerbmw
Ne yazık ki, window.innerWidth ve window.innerHeight kaydırma çubuğunun boyutunu dikkate almak için başarısız. Kaydırma çubukları mevcutsa, bu yöntemler neredeyse tüm tarayıcı tarayıcılarında pencere boyutu için yanlış sonuçlar döndürür. Görmek stackoverflow.com/a/31655549/508355 - hashchange


function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

17
2018-02-11 04:25





Ayrıca, WINDOW genişliğini ve yüksekliğini, tarayıcı araç çubuklarından ve diğer şeylerden de koruyabilirsiniz. O Tarayıcının penceresinde gerçek kullanılabilir alan.

Bunu yapmak için şunu kullanın: window.innerWidth  ve window.innerHeight özellikleri (w3schools adresindeki doktora bakın).

Çoğu durumda, örneğin, mükemmel bir şekilde merkezlenmiş kayan kalıcı iletişim kutusunu görüntülemek en iyi yol olacaktır. Hangi çözünürlük yönelimi veya pencere boyutu tarayıcıyı kullanıyor olursa olsun, penceredeki konumları hesaplamanızı sağlar.


15
2017-08-21 10:44



Bu, w3schools'a göre ie8 ve ie7'de desteklenmez. Ayrıca, w3schools'a bağlandığınızda dikkat etmelisiniz. Görmek meta.stackexchange.com/questions/87678/... - thecarpy


Herhangi bir web sitesinin mevcut yüklü sayfanızın yüksekliğini ve genişliğini kontrol etmek için "konsol" veya tıkladıktan sonra "Kontrol".

Aşama 1: Farenin sağ tuşunu tıklayın ve 'Inspect'i tıklayın ve' konsol'a tıklayın.

Adım 2: Tarayıcı ekranınızın 'maksimize' modunda olmamasına dikkat edin. Tarayıcı ekranı 'maksimize' modundaysa, önce en üst düzeye getir düğmesine (sağ veya sol üst köşede mevcut) tıklamanız ve en üst düzeye çıkarmanız gerekir.

Aşama 3: Şimdi, ('>') işaretinden büyük harfleri yazınız.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

12
2017-07-09 04:22



Bu neden seçilen cevap değil? - Iulian Onofrei
@IulianOnofrei çünkü orijinal soru setine tam olarak cevap vermiyor. Şaka, benim için doğru cevap. - rob
innerWidth ve innerHeight yalnızca viewport ölçeği 1 ise doğrudur. Bu varsayılandır, ancak css dönüşümleri kullanılarak yanlışlıkla değiştirilebilir. - Victor Stoddard
Kullanıcının tarayıcısının boyutunu belirlemek için "screen.width" yerine "window.innerWidth" çalıştı - teşekkürler! - Kevin Pajak


Belge genişliği ve yüksekliği için gerçekten kurşun geçirmez bir çözüme ihtiyacınız varsa ( pageWidth ve pageHeight Resimde), benim bir eklenti kullanmayı düşünebilirsiniz. jQuery.documentSize.

Sadece tek bir amacı vardır: jQuery ve diğer yöntemlerde bile, her zaman doğru belge boyutunu döndürmek için başarısız. Adına rağmen, jQuery'yi kullanmak zorunda değilsiniz - vanilya Javascript'te yazılmıştır ve jQuery olmadan çalışırayrıca

Kullanımı:

var w = $.documentWidth(),
    h = $.documentHeight();

küresel için document. Diğer belgeler için, ör. Katıştırılmış bir iframe'de erişiminiz var, belgeyi parametre olarak geçirin:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Güncelleme: şimdi pencere boyutları için de

1.1.0 sürümünden beri jQuery.documentSize ayrıca pencere boyutlarını da işler.

Bu gerekli çünkü

  • $( window ).height() olduğu iOS'da buggyyararsızlık noktasına
  • $( window ).width() ve $( window ).height() Hangi mobilde güvenilmez çünkü mobil yakınlaştırma etkilerini görmezler.

jQuery.documentSize sağlar $.windowWidth() ve $.windowHeight()Bu sorunları çözen Daha fazla bilgi için lütfen kontrol edin Dökümantasyon.


8
2018-03-04 22:30



VM2859: 1 Yakalanmamış DOMException: Kökeni olan bir çerçeveyi engelledi "localhost: 12999"; çapraz kökenli bir kareye erişmekten (…) bunun üzerine gelmek için herhangi bir yolu var mı ??? - fizmhd
Farklı bir alan adından iframe erişemezsiniz; aynı menşe politikası. Çıkış yapmak bu cevap. - hashchange


Boyutu görüntülemek için kullanabileceğiniz küçük bir javascript bookmarklet yazdım. Tarayıcınıza kolayca ekleyebilirsiniz ve her tıkladığınızda, tarayıcı pencerenizin sağ köşesinde boyutu göreceksiniz.

Burada bir yer işaretini nasıl kullanacağınızı bulabilirsiniz https://en.wikipedia.org/wiki/Bookmarklet 

Bookmarklet

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Orijinal Kod

Orijinal kod kahve içerisindedir:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

Temelde kod, pencerenizi yeniden boyutlandırdığınızda güncellenen küçük bir div hazırlıyor.


8
2018-03-31 09:25





Masaüstü ve cep telefonu tarayıcıları için gerçek görünüm boyutlarını bilmek için bir kitaplık geliştirdim, çünkü görüntüleme boyutları aygıtlar arasında tutarsızdır ve bu gönderinin tüm yanıtlarına dayanamaz (bu konuda yaptığım tüm araştırmalara göre): https://github.com/pyrsmk/W


4
2018-04-13 08:16