Pobierz rozmiar ekranu, bieżącej strony internetowej i okna przeglądarki

To wszystko, co musisz wiedzieć:

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

Ale w skrócie:

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

Fiddle

Oto rozwiązanie cross browser z czystym JavaScript (Źródło):

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

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

Inny niż jQuery sposób na uzyskanie dostępnego wymiaru ekranu. window.screen.width/height został już wystawiony, ale ze względu na responsywny webdesign i kompletność myślę, że warto wspomnieć o tych atrybutach:

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

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

AvailWidth i availHeight - dostępna szerokość i wysokość na ekran (z wyłączeniem pasków zadań systemu operacyjnego i tym podobnych).

Ale kiedy mówimy o responsywnych ekranach i jeśli chcemy obsłużyć je za pomocą jQuery z jakiegoś powodu,

window.innerWidth, window.innerHeight

Daje prawidłowy pomiar. Nawet usuwa dodatkową przestrzeń paska przewijania i nie musimy się martwić o dostosowanie tej przestrzeni:)

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

Możesz również uzyskać szerokość i wysokość okna, unikając pasków narzędzi przeglądarki i innych rzeczy. Jest to rzeczywisty obszar użytkowy w oknie przeglądarki .

Aby to zrobić, użyj: window.innerWidth i window.innerHeight właściwości (patrz doc w w3schools ).

W większości przypadków najlepszym sposobem, na przykład, będzie wyświetlenie idealnie wyśrodkowanego pływającego okna modalnego. Pozwala na obliczanie pozycji na oknie, bez względu na Orientację rozdzielczości lub rozmiar okna używanego w przeglądarce.

Aby sprawdzić wysokość i szerokość aktualnie załadowanej strony dowolnej witryny za pomocą "console" lub po kliknięciu "Inspect" .

Krok 1: Kliknij prawym przyciskiem myszy i kliknij "Sprawdź", a następnie kliknij "konsola"

Krok 2 : Upewnij się, że ekran przeglądarki nie powinien być w trybie "maksymalizacji". Jeśli ekran przeglądarki jest w trybie "maksymalizacji", musisz najpierw kliknąć przycisk maksymalizacji (obecny w prawym lub lewym górnym rogu) i anulować maksymalizację to.

Krok 3 : Teraz po znaku większym niż ('>') wpisz następujący tekst, tzn.

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

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

Jeśli potrzebujesz naprawdę kuloodpornego rozwiązania dla szerokości i wysokości dokumentu (pageWidth i pageHeight Na zdjęciu), możesz rozważyć użycie mojej wtyczki jQuery.documentSize .

Ma tylko jeden cel: zawsze zwracać prawidłowy rozmiar dokumentu, nawet w scenariuszach, gdy jQuery i inne metody zawodzą. Pomimo jego nazwy, nie musisz używać jQuery – jest napisany w vanilla Javascript i Działa bez jQuery , też.

Użycie:

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

Dla globalnego document. W przypadku innych dokumentów, np. w osadzonej ramce iframe, do której masz dostęp, Przekaż dokument jako parametr:

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

Aktualizacja: teraz również dla wymiarów okien

Od wersji 1.1.0 jQuery.documentSize obsługuje również wymiary okien.

Jest to konieczne, ponieważ

• W przeciwieństwie do poprzednich wersji, nie jest on w pełni funkcjonalny.]}
• $( window ).width() i $( window ).height() są zawodne na urządzeniach mobilnych ponieważ nie radzą sobie z efektami mobilnego powiększania.

JQuery.documentSize dostarcza $.windowWidth() i $.windowHeight(), które rozwiązują te problemy. Więcej informacji można znaleźć w w dokumentacji .

Napisałem małą książeczkę javascript, której możesz użyć do wyświetlenia rozmiaru. Możesz łatwo dodać go do przeglądarki i za każdym razem, gdy klikniesz, zobaczysz rozmiar w prawym rogu okna przeglądarki.

Tutaj znajdziesz informacje jak korzystać z 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);

Oryginalny Kod

Oryginalny kod jest w kawie:

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

W zasadzie kod jest poprzedzony małym div, który aktualizacje po zmianie rozmiaru okna.

W niektórych przypadkach związanych z układem responsywnym $(document).height() może zwracać błędne dane, które wyświetlają tylko wysokość portu widoku. Na przykład, gdy jakiś div#wrapper ma wysokość: 100%, to #wrapper może być rozciągnięty przez jakiś blok w środku. Ale jego wysokość nadal będzie jak wysokość viewport. W takiej sytuacji możesz użyć

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

, który reprezentuje rzeczywisty rozmiar wrappera.

Opracowałem bibliotekę do poznania rzeczywistego rozmiaru viewport dla komputerów stacjonarnych i mobilnych, ponieważ rozmiary viewport są niespójne na różnych urządzeniach i nie mogą polegać na wszystkich odpowiedziach tego postu (zgodnie z wszystkimi badaniami, które zrobiłem na ten temat): https://github.com/pyrsmk/W

Czasami musisz zobaczyć zmiany szerokości/wysokości podczas zmiany rozmiaru okna i wewnętrznej zawartości.

W tym celu napisałem mały skrypt, który dodaje okno dziennika, które dynamicznie monitoruje wszystkie zmiany rozmiaru i prawie natychmiast aktualizuje.

Dodaje poprawny HTML ze stałą pozycją i wysokim indeksem z, ale jest wystarczająco mały, więc możesz :

• Użyj go na aktualna strona
• Użyj go do testowania mobile / responsive widoki

testowane na: Chrome 40, IE11, ale bardzo możliwe jest również działanie na innych / starszych przeglądarkach ... :)

  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: teraz style są stosowane tylko do elementu tabeli loggera - nie do wszystkich tabel-również jest to rozwiązanie jQuery-free:)

Możesz użyć obiektu Screen , aby to uzyskać.

Oto przykład tego, co zwróci:

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

Aby otrzymać zmienną screenWidth, Wystarczy użyć screen.width, tak samo z screenHeight, wystarczy użyć screen.height.

Aby uzyskać szerokość i wysokość okna, będzie to odpowiednio screen.availWidth lub screen.availHeight.

Dla zmiennych pageX i pageY użyj window.screenX or Y. Zauważ, że jest to z bardzo lewej/górnej części twojego lewego / górnego ekranu . Więc jeśli masz dwa ekrany szerokość 1920 wtedy okno 500px z lewej strony prawego ekranu będzie miało wartość X2420 (1920+500). screen.width/height, jednak wyświetla szerokość lub wysokość bieżącego ekranu.

Aby uzyskać szerokość i wysokość strony, użyj jQuery $(window).height() lub $(window).width().

Ponownie używając jQuery, użyj $("html").offset().top i $("html").offset().left dla wartości pageX i pageY.

Oto moje rozwiązanie!

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

Możemy teraz bezpiecznie używać tylko natywnego javascript window api we wszystkich przeglądarkach , bez kontekstu okna.

Składnia jest dość jasna!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

Aby uzyskać dokładne wyniki w każdej przeglądarce i urządzeniu, wyniki należy pomnożyć przez devicePixelRatio .

Właściwość Window devicePixelRatio zwraca stosunek rozdzielczość w pikselach fizycznych do rozdzielczości w pikselach CSS dla aktualny wyświetlacz urządzenie. Wartość tę można również interpretować jako stosunek wielkości pikseli: wielkość jednego piksela CSS do wielkości jednego piksel fizyczny. Mówiąc prościej, mówi to przeglądarce, ile z rzeczywiste piksele ekranu powinny być używane do rysowania pojedynczego piksela CSS.

Jest to przydatne przy radzeniu sobie z różnicą pomiędzy renderowaniem na standardowy wyświetlacz w porównaniu z wyświetlaczem HiDPI lub Retina, które wykorzystują więcej pikseli ekranu, aby narysować te same obiekty, co skutkuje ostrzejszym obrazem.

Nie ma możliwości powiadomienia o zmianie tej wartości (co może się, na przykład, jeśli użytkownik przeciągnie okno na wyświetlacz z różnej gęstości pikseli). Ponieważ nie ma wywołań zwrotnych ani zdarzeń dostępne do wykrywania zmian gęstości pikseli, jedynym sposobem na to jest okresowo sprawdzaj wartość devicePixelRatio, aby sprawdzić, czy jest zmieniony. Po prostu nie rób tego zbyt często, bo wpłynie to na wydajność.

Https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Oto moje rozwiązanie. Najpierw pojawia się jakiś obiekt użytkowy do pracy z ciasteczkiem

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

W ten sposób możesz użyć języka serwera, aby odczytać pliki cookie i uzyskać dokładny rozmiar obrazu ekranu użytkownika.