Obter o tamanho do ecrã, página web actual e janela do navegador

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

Mas em resumo:

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

Violino

Aqui está uma solução cross browser com puro JavaScript (Origem):

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

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

Uma forma não-jQuery de obter a dimensão do ecrã disponível. window.screen.width/height já foi colocado, mas para uma webdesign sensível e completude acho que vale a pena mencionar esses atributos:

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

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

AvailWidth e availHeight - A largura e a altura disponíveis no ecrã (excluindo as barras de tarefas do sistema operacional).

window.innerWidth, window.innerHeight

Dá a medição correcta. Mesmo ele remove o espaço extra da barra de pergaminho e não precisamos nos preocupar em ajustar esse espaço:)

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

Você também pode obter a largura e altura da janela, evitando barras de ferramentas do navegador e outras coisas. É a área real utilizável na janela do navegador .

Para fazer isto, use: window.innerWidth e window.innerHeight Propriedades (ver doc em w3schools).

Na maioria dos casos será a melhor maneira, por exemplo, de mostrar um diálogo modal flutuante perfeitamente centrado. Ele permite que você calcule as posições na janela, não importa qual a orientação de resolução ou o tamanho da janela está usando o navegador.

Para verificar a altura e a largura da sua página actual carregada de qualquer sítio Web, usando "consola" ou depois de carregar em "inspeccionar".

Passo 1 : carregue no botão direito do rato e carregue em 'inspeccionar' e depois carregue em'consola'

Passo 2 : Certifique-se que o ecrã do seu navegador não está no modo de 'maximizar'. Se o ecrã do navegador estiver no modo "maximizar", você precisa primeiro clicar no botão Maximizar (presente no canto superior direito ou esquerdo) e desmotivá-lo.

Passo 3 : agora, escreva o seguinte depois do sinal maior do que ( ' > ' ) ou seja

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

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

Se precisar de uma solução verdadeiramente à prova de bala para a largura e altura do documento (o pageWidth e o pageHeight na imagem), poderá pensar em usar um 'plugin' meu, jQuery.documentSize.

Tem apenas um propósito: devolver sempre o tamanho correcto do documento, mesmo em cenários em que o jQuery e outros métodos falham. Apesar de seu nome, você não precisa necessariamente usar jQuery-é escrito em vanilla Javascript e trabalha sem jQuery , muito.

Utilização:

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

Para o global document. Para outros documentos, por exemplo numa iframe embutida a que tem acesso, passe o documento como um parâmetro:

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

Actualizar: agora também para as dimensões da janela

Isso é necessário porque

• $( window ).height() é buggy em iOS , ao ponto de ser inútil
• $( window ).width() e $( window ).height() são Não são confiáveis no telemóvel porque não lidam com os efeitos da ampliação móvel.

Escrevi um pequeno marcador javascript que pode usar para mostrar o tamanho. Você pode facilmente adicioná-lo ao seu navegador e sempre que você clicar nele, você vai ver o tamanho no canto direito da sua janela de navegador.

Aqui você encontra informações sobre como usar um favorito https://en.wikipedia.org/wiki/Bookmarklet

Marcador

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

Código Original

O código original está no café:

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

Em alguns casos relacionados com a disposição sensível $(document).height() Pode devolver os dados errados que mostram apenas a altura do porto de visualização. Por exemplo, quando algum papel div#tem altura:100%, esse papel #pode ser esticado por algum bloco dentro dele. Mas a altura ainda vai ser como a altura da janela. Nestas situações pode utilizar

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

Eu desenvolvi uma biblioteca para conhecer o real tamanho do visor para desktops e celulares navegadores, porque visor tamanhos são inconsistents através de dispositivos e não pode confiar em todas as respostas desse post (de acordo com todas as pesquisas que eu fiz sobre isso) : https://github.com/pyrsmk/W

Por vezes, é necessário ver as alterações de largura/altura ao redimensionar a janela e o conteúdo interior.

Adiciona um HTML válido com posição fixa e índice z elevado, mas é pequeno o suficiente, por isso você pode:

• usa - o num local real
• usa-o para testar móvel / sensível vistas

testada em: Chrome 40, IE11, mas é altamente possível trabalhar em outros navegadores/mais antigos também ... :)

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

Editar: agora os estilos são aplicados apenas ao elemento tabela logger - não a todas as tabelas - também esta é uma solução livre de jQuery:)

Pode usar o objecto para obter isto.

O seguinte é um exemplo do que ele retornaria:

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

Para obter a sua variável screenWidth, Basta usar screen.width, o mesmo com screenHeight, basta usar screen.height.

Para obter a largura e altura da janela, seria screen.availWidth ou screen.availHeight respectivamente.

Para as variáveis pageX e pageY, utilizar window.screenX or Y. Note que isto vem do muito à esquerda/topo do seu ecrã de esquerda/topo . Então, se tiveres dois ecrãs de largura 1920 então uma janela 500px à esquerda do ecrã direito teria um valor X de 2420 (1920+500). screen.width/height, no entanto, mostra a largura ou a altura do ecrã actual.

Para obter a largura e a altura da sua página, use jQuery $(window).height() ou $(window).width().

Novamente usando jQuery, use $("html").offset().top e $("html").offset().left para os seus valores de pageX e pageY.

Agora podemos usar em segurança a API de janela JavaScript nativa em todos os navegadores , sem o contexto da janela.

A sintaxe é bastante clara!

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    

})()

Para obter resultados precisos em todos os navegadores e dispositivos, os resultados devem ser multiplicados pelo devicePixelRatio .

A propriedade da janela devicePixelRatio devolve a razão da resolução em pixels físicos para a resolução em CSS pixels para a dispositivo de visualização actual. Este valor pode também ser interpretado como relação entre os tamanhos de pixels: o tamanho de um pixel CSS e o tamanho de um pixel físico. Em termos mais simples, isto diz ao navegador quantos os pixels reais do ecrã devem ser usados para desenhar um único pixel CSS.

Isto é útil ao lidar com a diferença entre renderização em um visor padrão versus um visor HiDPI ou Retina, que usa mais pixels do ecrã para desenhar os mesmos objectos, resultando em uma imagem mais nítida.

Não há como ser notificado quando este valor é alterado (o que pode acontece, por exemplo, se o utilizador arrastar a janela para um ecrã com um densidade de pixels diferente). Uma vez que não há callbacks ou eventos disponível para detectar alterações na densidade de pixels, a única forma de o fazer é verifique periodicamente o valor do devicePixelRatio para ver se está alteracao. Mas não o faças muitas vezes, ou vais ter impacto no desempenho.

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

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

Desta forma pode usar uma linguagem serverside para ler os cookies e obter o tamanho exacto da imagem do ecrã do utilizador.