Pertanyaan Dapatkan ukuran layar, halaman web saat ini dan jendela browser


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

screenshot describing which values are wanted


1596
2017-08-09 06:28


asal


Jawaban:


Jika Anda menggunakan jQuery, Anda bisa mendapatkan ukuran jendela atau dokumen menggunakan metode jQuery:

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

Untuk ukuran layar Anda bisa menggunakan screen objek dengan cara berikut:

screen.height;
screen.width;

1137
2017-08-09 06:39



Ini semua yang perlu Anda ketahui:

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

tapi singkatnya:

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

Biola


815
2017-07-31 15:52



Berikut ini solusi peramban silang dengan murni JavaScript (Sumber):

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

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

362
2018-01-30 17:44



Cara non-jQuery untuk mendapatkan dimensi layar yang tersedia. window.screen.width/height sudah disiapkan, tetapi untuk webdesign dan kelengkapan responsif, menurut saya 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 taskbars OS dan semacamnya).


77
2018-06-20 10:06



Tetapi ketika kita berbicara tentang layar responsif dan jika kita ingin menanganinya menggunakan jQuery untuk beberapa alasan,

window.innerWidth, window.innerHeight

memberikan pengukuran yang benar. Bahkan itu menghilangkan ruang ekstra scroll-bar dan kita tidak perlu khawatir tentang menyesuaikan ruang itu :)


47
2018-04-22 07:29



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



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

Untuk melakukan ini, gunakan: window.innerWidth  dan window.innerHeight properti (lihat dokumen di w3schools).

Dalam banyak kasus, ini akan menjadi cara terbaik, misalnya, untuk menampilkan dialog modal mengambang yang terpusat sempurna. Ini memungkinkan Anda untuk menghitung posisi pada jendela, tidak peduli orientasi resolusi atau ukuran jendela menggunakan browser.


15
2017-08-21 10:44