Puteți obține dimensiunea ferestrei sau document cu jQuery:

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

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

Pentru dimensiunea ecranului puteți utiliza ecran obiect:

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

Acest lucru are tot ce aveți nevoie să știți: Get viewport/window size

dar pe scurt:

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

Vioara

Vă rugăm să opriți de editare acest răspuns. L's a fost editat de 20 de ori acum cu diferite persoane pentru a se potrivi lor de cod format preferință. L's, de asemenea, a fost subliniat faptul că acest lucru nu e't este necesar doar dacă doriți să-țintă browsere moderne - dacă aveți nevoie doar de următoarele:

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

console.log(width, height);

Aici este un browser-ul cruce soluție cu pure JavaScript (Sursa):

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

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

Un non-jQuery modalitate de a obține disponibile dimensiune ecran. fereastră.ecran.lățime/înălțime, a fost deja pus, dar pentru responsive webdesign și exhaustivitatea dragul cred ca merita sa mai vorbim de acele atribute:

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

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

availWidth și availHeight - disponibil lățime și înălțime pe ecran (cu excepția sistemului de OPERARE taskbars și cum).

Dar atunci când vorbim despre receptiv ecrane și dacă vrem să-l ocupe folosind jQuery pentru un motiv oarecare,

window.innerWidth, window.innerHeight

oferă o măsurare corectă. Chiar elimină scroll-bar's spațiu suplimentar și nu ne't nevoie să vă faceți griji despre ajustarea acestui spațiu :)

Puteți obține, de asemenea, FEREASTRA de lățime și înălțime, evitând browser, bare de instrumente și alte chestii. Este real suprafață utilizabilă în browser-ul's ferestrei.

Pentru a face acest lucru, utilizați: fereastră.innerWidth " și " fereastră.innerHeight properties (a se vedea doc de la w3schools).

În cele mai multe cazuri, acesta va fi cel mai bun mod, de exemplu, pentru a afișa un perfect centrat plutitoare dialog modal. Acesta vă permite să calculeze pozițiile pe fereastră, indiferent de rezoluția orientarea sau mărimea ferestrei este folosind browser-ul.

Pentru a verifica înălțimea și lățimea curentă a încărcat pagina de pe orice site web folosind "console" sau după ce faceți clic pe "Verificați".

etapa 1: faceți Clic pe butonul din dreapta al mouse-ului și faceți clic pe 'a Inspecta' și apoi faceți clic pe 'console'

pasul 2: Asigurați-vă că ecranul browser-ul dvs. ar trebui să fie nu în 'maximiza' modul. Dacă ecranul browser-ul este in 'maximiza' modul, trebuie mai întâi să faceți clic pe butonul de maximizare (prezente fie la dreapta sau la stânga colțul de sus) și onu a-l maximiza.

pasul 3: Acum, scrie următoarele, după mai mult de semn ('>'), adică

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

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

Dacă ai nevoie de o situare cu adevărat de antiglonț soluție pentru document lățime și înălțime (pageWidth " și " pageHeight în imagine), ați putea dori să ia în considerare folosind un plugin de-al meu, jQuery.documentSize.

Ea are doar un singur scop: să se întoarcă mereu corect dimensiune document, chiar și în scenariile când jQuery și alte metode fail. În ciuda numelui său, nu't trebuie neapărat să utilizați jQuery – este scris în vanilie Javascript și funcționează fără jQuery, de asemenea.

Utilizare:

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

pentru global "document". Pentru alte documente, de exemplu, într-un încorporate iframe aveți acces la, trece document ca un parametru:

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

Actualizare: acum, pentru dimensiuni fereastră, prea

De când versiunea 1.1.0, jQuery.documentSize ocupă, de asemenea, dimensiuni fereastră.

Care este necesar pentru

• $( fereastră ).inaltime() este buggy în iOS, la punctul de a fi inutil
• $( fereastră ).lățime() și $( fereastră ).inaltime() sunt nesigure pe mobil pentru că ei don't se ocupe de efectele mobil zoom.

jQuery.documentSize oferă $.windowWidth() și $.windowHeight(), care rezolva aceste probleme. Pentru mai multe, vă rugăm să verificați documentația.

Am scris un mic javascript bookmarklet puteți utiliza pentru a afișa dimensiunea. Puteți adăuga cu ușurință la browser-ul dvs. și ori de câte ori faceți clic pe ea, veți vedea dimensiunea în colțul din dreapta sus al browser-ului.

Aici veți găsi informații despre cum să utilizați un 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);

Codul Original

Codul original este în cafea:

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

Practic, codul este precedarea un mic div care actualizează atunci când redimensionați fereastra ta.

În unele cazuri, legate cu aspect receptiv `$(document).inaltime () poate returna date eronate care afișează portul de vedere înălțime numai. De exemplu, atunci când un div#wrapper are înălțime:100%, care #wrapper poate fi întins de la un bloc în interiorul acestuia. Dar's înălțime încă va fi o astfel de viewport înălțime. În astfel de situație s-ar putea folosi

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

Care reprezintă dimensiunea reală de înveliș.

Am dezvoltat o bibliotecă pentru a ști cu adevărat dimensiunea viewport pentru desktop-uri și telefoane mobile browsere, pentru că viewport dimensiuni sunt inconsistents pe toate dispozitivele și nu se poate baza pe toate răspunsurile de care post (în funcție de toate cercetarea pe care am făcut-o) : https://github.com/pyrsmk/W

Uneori ai nevoie pentru a vedea lățime/înălțime se schimbă în timp ce redimensionarea ferestrei și conținutul interior.

Pentru că m-am'am scris un mic script care se adaugă un jurnal cutie care dynamicly monitorizează toate redimensionarea și aproape imediat actualizări.

Se adaugă un HTML valid cu poziție fixă și de înaltă z-index, dar este suficient de mic, astfel încât puteți:

• folositi-l pe un real site-ul
• utilizați-l pentru testare telefonie mobilă/receptiv opinii

Testat pe: Crom 40, IE11, dar este foarte posibil să se lucreze pe alte/browsere mai vechi prea ... :)

  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

Puteți utiliza Ecran obiect pentru a obține acest lucru.

Următorul este un exemplu de ceea ce ar reveni:

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

Pentru a obține procesează imagini variabila, trebuie doar să utilizați ecran.lățime, la fel cuscreenHeight, le-ar folosi pentru ecran.înălțime.

Pentru a obține fereastra ta lățime și înălțime, ar fi de ecran.availWidth " sau " ecran.availHeight respectiv.

Pentru pageX " și " pageY variabile, utilizați fereastra.screenX sau Y. Rețineți că acest lucru este de la **FOARTE de STANGA/de SUS DIN STANGA/SUS-est ECRAN**. Deci, dacă aveți două ecrane de lățime 1920 apoi o fereastră 500px de la stânga la dreapta ecranului ar fi un X valoarea2420 (1920+500). ecran.lățime/înălțime, cu toate acestea, afișa ecranul CURENT's lățime sau înălțime.

Pentru a obține lățimea și înălțimea paginii, utilizați jQuery's $(fereastră).inaltime () " sau " $(fereastră).lățime().

Din nou, folosind jQuery, folosi $("html").offset().de sus " și " $("html").offset().stânga pentru `pageX " și " pageY valorilor.

aici este soluția mea!

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

Asta cum de-am reușit pentru a obține lățimea ecranului în Reacționa JS Proiect:

Dacă lățimea este egală cu 1680 apoi să se întoarcă 570 altceva reveni 200

var screenWidth = window.screen.availWidth;

a  

Ecran.availWidth