Ben nasıl alabilirim windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYhangi tüm büyük tarayıcılarda çalışacak?

JQuery ile pencerenin veya belgenin boyutunu alabilirsiniz:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Ekran boyutu için screennesneyi kullanabilirsiniz :

window.screen.height;
window.screen.width;

Bilmeniz gereken her şey var: Görünüm / pencere boyutu alın

ama kısaca:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Vaktini boşa harcamak

Lütfen bu yanıtı düzenlemeyi bırakın. Farklı kişiler tarafından artık kod biçimi tercihlerine uyacak şekilde 22 kez düzenlendi. Ayrıca, yalnızca modern tarayıcıları hedeflemek istiyorsanız bunun gerekli olmadığı da belirtilmiştir - eğer öyleyse sadece aşağıdakilere ihtiyacınız vardır:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

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

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

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

Kullanılabilir ekran boyutunu almanın jQuery olmayan bir yolu. window.screen.width/heightzaten konulmuştur, ancak duyarlı web tasarımı ve tamlık uğruna bu özelliklerden bahsetmeye değer olduğunu düşünüyorum:

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

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

availWidth ve availHeight - Ekrandaki kullanılabilir genişlik ve yükseklik (işletim sistemi görev çubukları vb. hariç).

Ancak duyarlı ekranlar hakkında konuştuğumuzda ve bir nedenden dolayı jQuery kullanarak işlemek istiyorsak,

window.innerWidth, window.innerHeight

doğru ölçümü verir. Kaydırma çubuğunun fazladan alanını bile kaldırır ve bu alanı ayarlamak konusunda endişelenmemize gerek yoktur :)

Tarayıcı araç çubukları ve diğer şeylerden kaçınarak WINDOW genişliğini ve yüksekliğini de alabilirsiniz. Öyle tarayıcının penceresinde gerçek kullanım alanı .

Bunu yapmak için: window.innerWidth ve window.innerHeightözelliklerini kullanın ( bkz. W3schools, doc ).

Ç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.

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>');

Herhangi bir web sitesinin geçerli yüklü sayfanızın yüksekliğini ve genişliğini "konsol" kullanarak veya "İncele" yi tıklattıktan sonra kontrol etmek için .

1. adım : Farenin sağ düğmesini tıklayın ve 'İncele' düğmesini ve ardından 'konsol'u tıklayın

2. adım : Tarayıcı ekranınızın 'ekranı kapla' modunda olmadığından emin olun. Tarayıcı ekranı 'ekranı kapla' modundaysa, önce ekranı kapla düğmesini (sağ veya sol üst köşede bulunur) tıklamanız ve ekran kaplamasını büyütmeniz gerekir.

Adım 3 : Şimdi, büyük olandan ('>') sonra aşağıdakileri yazın

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

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

Eğer belge genişlik ve yükseklik (için gerçekten kurşun geçirmez bir çözüm gerekiyorsa pageWidthve pageHeightresimdeki), sen benim bir eklenti kullanarak düşünebilirsiniz jQuery.documentSize .

Sadece bir amacı vardır: jQuery ve diğer yöntemler başarısız olduğunda senaryolarda bile her zaman doğru belge boyutunu döndürmek . İsmine rağmen, jQuery kullanmak zorunda değilsiniz - vanilya Javascript ile yazılmıştır ve jQuery olmadan da çalışır .

Kullanımı:

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

küresel için document. Örneğin, erişiminiz olan gömülü iframe'de diğer belgeler için belgeyi parametre olarak iletin:

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

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

1.1.0 sürümünden bu yana, jQuery.documentSize pencere boyutlarını da işler.

Bu gerekli çünkü

• $( window ).height()olduğu IOS arabası gereksiz olma noktasına,
• $( window ).width()ve $( window ).height()olan mobil üzerine güvenilmez mobil yakınlaştırma etkilerini işlem yapmadığı için.

jQuery.documentSize sağlar $.windowWidth()ve $.windowHeight()bu sorunları çözer. Daha fazla bilgi için lütfen belgelere bakın .

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

Burada bir yer iminin nasıl kullanılacağı hakkında bilgi 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 kahvede:

(->
  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()
)()

Temel olarak kod, pencerenizi yeniden boyutlandırdığınızda güncellenen küçük bir div ekliyor.

Duyarlı mizanpaj ile ilgili bazı durumlarda $(document).height(), yalnızca görünüm bağlantı noktası yüksekliğini gösteren yanlış veriler döndürülebilir. Örneğin, bazı div # sarıcısı yüksekliğe sahip olduğunda:% 100, bu # sarıcı içindeki bir blok tarafından gerilebilir. Ancak yüksekliği hala görünüm yüksekliği gibi olacak. Böyle bir durumda

$('#wrapper').get(0).scrollHeight

Bu, sargının gerçek boyutunu temsil eder.

Ekran boyutları ile ilgili eksiksiz rehber

JavaScript

Boy için:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Not: Pencere büyütüldüğünde ekran eşit olacaktır.

Genişlik için:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

jQuery

Boy için:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Genişlik için:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Referans: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

Masaüstü bilgisayarlar ve cep tarayıcıları için gerçek görüntü alanı boyutunu bilmek amacıyla bir kütüphane geliştirdim, çünkü görüntü alanı boyutları aygıtlar arasında tutarsız ve bu yazının tüm yanıtlarına güvenemiyor (bu konuda yaptığım tüm araştırmalara göre): https: // github com / pyrsmk / W

Bazen pencere ve iç içeriği yeniden boyutlandırırken genişlik / yükseklik değişikliklerini görmeniz gerekir.

Bunun için tüm yeniden boyutlandırma ve neredeyse anında güncellemeleri dinamik olarak izleyen bir günlük kutusu ekleyen küçük bir komut dosyası yazdım.

Sabit konuma ve yüksek z dizinine sahip geçerli bir HTML ekler, ancak yeterince küçüktür, böylece şunları yapabilirsiniz :

• Bir üzerinde kullanmak fiili sitede
• mobil / duyarlı görünümleri test etmek için kullanın

Test edildi: Chrome 40, IE11, ancak diğer / eski tarayıcılarda da çalışmak son derece mümkündür ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

DÜZENLEME: Artık stiller yalnızca logger tablo öğesine uygulanır - tüm tablolara değil - bu jQuery içermeyen bir çözümdür :)

Tanıtılmasıyla globalThisiçinde ES2020 sen gibi özelliklerini kullanabilirsiniz.

Ekran boyutu için:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Pencere Boyutu için

globalThis.outerWidth
globalThis.outerHeight

Ofset için:

globalThis.pageXOffset
globalThis.pageYOffset

...& yakında.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Bunu elde etmek için Screen nesnesini kullanabilirsiniz.

Aşağıda, ne döndüreceğine bir örnek verilmiştir:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

screenWidthDeğişkeninizi elde etmek için , sadece screen.widthaynı şekilde screenHeightkullanın screen.height.

Pencere genişliğinizi ve yüksekliğinizi almak için, sırasıyla screen.availWidthveya olur screen.availHeight.

İçin pageXve pageYdeğişkenler, kullanım window.screenX or Y. Bunun SOL / TOP-est EKRANINIZIN ÇOK SOL / ÜSTÜNDEN olduğunu unutmayın . Eğer iki genişlik 1920ekranınız varsa, sağ ekranın solundan 500px'lik bir pencerenin X değeri 2420(1920 + 500) olacaktır. screen.width/heightancak, AKIM ekranının genişliğini veya yüksekliğini görüntüleyin.

Sayfanızın genişliğini ve yüksekliğini almak için jQuery $(window).height()veya 'yi kullanın $(window).width().

Yine jQuery, kullanımını kullanarak $("html").offset().topve $("html").offset().leftsizin için pageXve pageYdeğerler.

işte benim çözümüm!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

React JS Projesi'nde ekran genişliğini elde etmeyi nasıl başardım:

Genişlik 1680'e eşitse 570 döndür, aksi takdirde 200 döndür

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth