Bagaimana saya bisa mendapatkan windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYyang akan bekerja di semua browser utama?

Anda bisa mendapatkan ukuran jendela atau dokumen dengan jQuery:

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

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

Untuk ukuran layar Anda dapat menggunakan screenobjek:

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

Ini memiliki semua yang perlu Anda ketahui: Dapatkan ukuran viewport / jendela

tetapi singkatnya:

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

Biola

Tolong berhenti mengedit jawaban ini. Sudah diedit 22 kali sekarang oleh orang yang berbeda untuk mencocokkan preferensi format kode mereka. Juga telah ditunjukkan bahwa ini tidak diperlukan jika Anda hanya ingin menargetkan browser modern - jika demikian Anda hanya perlu yang berikut ini:

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

console.log(width, height);

Berikut ini adalah solusi lintas browser dengan JavaScript murni ( Sumber ):

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

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

Cara non-jQuery untuk mendapatkan dimensi layar yang tersedia. window.screen.width/heightsudah disiapkan, tetapi untuk desain web responsif dan demi kelengkapan saya pikir nilainya untuk menyebutkan atribut-atribut tersebut:

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

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

availWidth dan availHeight - Lebar dan tinggi yang tersedia di layar (tidak termasuk taskbar OS dan semacamnya).

Tetapi ketika kita berbicara tentang layar responsif dan jika kita ingin menanganinya menggunakan jQuery karena suatu alasan,

window.innerWidth, window.innerHeight

memberikan pengukuran yang benar. Bahkan itu menghilangkan ruang ekstra bilah gulir dan kita tidak perlu khawatir tentang menyesuaikan ruang itu :)

Anda juga bisa mendapatkan WINDOW lebar dan tinggi, menghindari bilah alat peramban dan hal-hal lainnya. Ini adalah area yang dapat digunakan nyata di jendela browser .

Untuk melakukan ini, gunakan: window.innerWidth dan window.innerHeightproperti ( lihat doc di w3schools ).

Dalam kebanyakan kasus itu akan menjadi cara terbaik, misalnya, untuk menampilkan dialog modal mengambang terpusat sempurna. Ini memungkinkan Anda untuk menghitung posisi di jendela, terlepas dari orientasi resolusi atau ukuran jendela mana yang menggunakan browser.

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

Untuk memeriksa tinggi dan lebar halaman yang dimuat saat ini dari situs web apa pun menggunakan "konsol" atau setelah mengklik "Periksa" .

langkah 1 : Klik tombol kanan mouse dan klik 'Periksa' lalu klik 'konsol'

langkah 2 : Pastikan layar browser Anda tidak dalam mode 'maksimalkan'. Jika layar peramban dalam mode 'maksimalkan', Anda harus terlebih dahulu mengeklik tombol maksimalkan (ada di sudut kanan atau kiri atas) dan batalkan-maksimalkan.

langkah 3 : Sekarang, tulis berikut ini setelah tanda lebih besar dari ('>') yaitu

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

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

Jika Anda membutuhkan solusi anti peluru untuk lebar dan tinggi dokumen ( pageWidthdan pageHeightdalam gambar), Anda mungkin ingin mempertimbangkan untuk menggunakan plugin milik saya, jQuery.documentSize .

Ini hanya memiliki satu tujuan: untuk selalu mengembalikan ukuran dokumen yang benar, bahkan dalam skenario ketika jQuery dan metode lainnya gagal . Terlepas dari namanya, Anda tidak harus menggunakan jQuery - ditulis dalam vanilla Javascript dan bekerja tanpa jQuery juga.

Pemakaian:

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

untuk global document. Untuk dokumen lain, misalnya dalam iframe tertanam yang Anda dapat mengaksesnya, kirimkan dokumen sebagai parameter:

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

Perbarui: sekarang juga untuk dimensi jendela

Sejak versi 1.1.0, jQuery.documentSize juga menangani dimensi jendela.

Itu perlu karena

• $( window ).height()adalah kereta di iOS , untuk titik yang tidak berguna
• $( window ).width()dan $( window ).height()tidak dapat diandalkan di ponsel karena mereka tidak menangani efek pembesaran seluler.

jQuery.documentSize menyediakan $.windowWidth()dan $.windowHeight(), yang menyelesaikan masalah ini. Untuk lebih lanjut, silakan lihat dokumentasi .

Saya menulis bookmarklet javascript kecil yang dapat Anda gunakan untuk menampilkan ukurannya. Anda dapat dengan mudah menambahkannya ke browser Anda dan setiap kali Anda mengkliknya Anda akan melihat ukuran di sudut kanan jendela browser Anda.

Di sini Anda menemukan informasi cara menggunakan bookmarklet 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);

Kode Asli

Kode asli dalam kopi:

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

Pada dasarnya kod ini menambahkan sebuah div kecil yang diperbarui ketika Anda mengubah ukuran jendela Anda.

Dalam beberapa kasus yang terkait dengan tata letak responsif $(document).height()dapat mengembalikan data yang salah yang hanya menampilkan ketinggian port tampilan. Misalnya ketika beberapa div # wrapper memiliki tinggi: 100%, #wrapper itu dapat diregangkan oleh beberapa blok di dalamnya. Tapi tingginya masih akan seperti tinggi viewport. Dalam situasi seperti itu Anda mungkin menggunakan

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

Itu mewakili ukuran sebenarnya dari pembungkus.

Panduan lengkap terkait dengan ukuran Layar

JavaScript

Untuk tinggi:

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

Catatan: Ketika jendela dimaksimalkan ini akan sama dengan screen.availHeight

Untuk lebar:

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

Untuk tinggi:

$(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.                         

Untuk lebar:

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

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

Saya mengembangkan perpustakaan untuk mengetahui ukuran viewport yang sebenarnya untuk desktop dan browser ponsel, karena ukuran viewport tidak konsisten di seluruh perangkat dan tidak dapat mengandalkan semua jawaban dari posting itu (menurut semua penelitian yang saya buat tentang ini): https: // github .com / pyrsmk / W

Terkadang Anda perlu melihat perubahan lebar / tinggi saat mengubah ukuran jendela dan konten dalam.

Untuk itu saya telah menulis skrip kecil yang menambahkan kotak log yang secara dinamis memonitor semua pembaruan ukuran dan hampir dengan segera.

Itu menambahkan HTML yang valid dengan posisi tetap dan indeks z tinggi, tetapi cukup kecil, sehingga Anda dapat :

• gunakan di situs yang sebenarnya
• gunakan untuk menguji tampilan seluler / responsif

Diuji pada: Chrome 40, IE11, tetapi sangat mungkin untuk bekerja di browser lain / yang lebih lama juga ... :)

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

EDIT: Sekarang gaya diterapkan hanya untuk elemen tabel logger - tidak untuk semua tabel - juga ini adalah solusi bebas jQuery :)

Dengan diperkenalkannya globalThisdi ES2020 Anda dapat menggunakan properti seperti.

Untuk ukuran layar:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Untuk Ukuran Jendela

globalThis.outerWidth
globalThis.outerHeight

Untuk Offset:

globalThis.pageXOffset
globalThis.pageYOffset

... dan seterusnya.

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

Anda dapat menggunakan objek Layar untuk mendapatkan ini.

Berikut ini adalah contoh dari apa yang akan dikembalikan:

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

Untuk mendapatkan screenWidthvariabel Anda , gunakan saja screen.width, sama dengan screenHeight, Anda hanya akan menggunakan screen.height.

Untuk mendapatkan lebar dan tinggi jendela Anda, itu akan menjadi screen.availWidthatau screen.availHeightmasing - masing.

Untuk pageXdan pageYvariabel, gunakan window.screenX or Y. Perhatikan bahwa ini berasal dari LAYAR SANGAT KIRI / ATAS KIRIM ANDA / TOP-est . Jadi jika Anda memiliki dua layar lebar 1920maka sebuah jendela 500px dari kiri layar kanan akan memiliki nilai X 2420(1920 + 500). screen.width/heightNamun, tampilkan lebar atau tinggi layar CURRENT.

Untuk mendapatkan lebar dan tinggi halaman Anda, gunakan jQuery's $(window).height()atau $(window).width().

Sekali lagi menggunakan jQuery, gunakan $("html").offset().topdan $("html").offset().leftuntuk nilai pageX- pageYnilai Anda dan .

ini solusinya!

// 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();
})();

Begini cara saya berhasil mendapatkan lebar layar di React JS Project:

Jika lebar sama dengan 1680 maka kembalikan 570 lagi kembalikan 200

var screenWidth = window.screen.availWidth;

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

Screen.availWidth