javascript - saber - Obtenga el tamaño de la pantalla, la página web actual y la ventana del navegador




tamaño navegador javascript (12)

¿Cómo puedo obtener windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY que funcionará en todos los navegadores principales?

https://code.i-harness.com


¡Aquí está mi solución!

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


A veces es necesario ver los cambios de ancho / alto al cambiar el tamaño de la ventana y el contenido interno.

Para eso he escrito un pequeño script que agrega un cuadro de registro que monitorea dinámicamente todo el cambio de tamaño y se actualiza casi de inmediato.

Agrega un HTML válido con una posición fija y un alto índice z, pero es lo suficientemente pequeño, por lo que puede :

  • usarlo en un sitio real
  • Úsalo para probar vistas móviles / receptivas


Probado en: Chrome 40, IE11, pero también es muy posible trabajar en otros navegadores más antiguos ... :)

  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: Ahora los estilos se aplican solo al elemento de tabla del registrador, no a todas las tablas, también se trata de una solución sin jQuery :)


Aquí está mi solución. Primero va algún objeto de utilidad para trabajar con cookie.

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

Entonces puedes hacer algo como ...

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

De esta manera, puede utilizar un idioma del lado del servidor para leer las cookies y obtener el tamaño de imagen exacto de la pantalla del usuario.


Aquí hay una solución de navegador cruzado con JavaScript puro ( w3schools.com/jsref/prop_win_innerheight.asp ):

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

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

En algunos casos relacionados con el diseño receptivo $(document).height() puede devolver datos incorrectos que muestran solo la altura del puerto de vista. Por ejemplo, cuando alguna envoltura div # tiene altura: 100%, ese #contenedor puede estirarse por algún bloque dentro de ella. Pero su altura todavía será como la altura de la ventana gráfica. En tal situación usted podría usar

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

Eso representa el tamaño real de la envoltura.


Escribí un pequeño marcador de javascript que puedes usar para mostrar el tamaño. Puede agregarlo fácilmente a su navegador y cada vez que haga clic en él verá el tamaño en la esquina derecha de la ventana de su navegador.

Aquí encontrará información sobre cómo usar un marcador de marcadores 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);

Codigo original

El código original está en el 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()
)()

Básicamente, el código está anteponiendo una pequeña división que se actualiza cuando cambia el tamaño de su ventana.


Para verificar la altura y el ancho de su página actual cargada de cualquier sitio web usando "consola" o después de hacer clic en "Inspeccionar" .

paso 1 : haga clic en el botón derecho del mouse y haga clic en 'Inspeccionar' y luego haga clic en 'consola'

paso 2 : asegúrese de que la pantalla del navegador no esté en modo 'maximizar'. Si la pantalla del navegador está en el modo 'maximizar', primero debe hacer clic en el botón maximizar (presente en la esquina superior derecha o izquierda) y anular su ampliación.

paso 3 : Ahora, escribe lo siguiente después del signo mayor que ('>'), es decir

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

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

Pero cuando hablamos de pantallas de respuesta y si queremos manejarlo usando jQuery por alguna razón,

window.innerWidth, window.innerHeight

Da la medida correcta. Incluso elimina el espacio adicional de la barra de desplazamiento y no tenemos que preocuparnos por ajustar ese espacio :)


Si está utilizando jQuery, puede obtener el tamaño de la ventana o el documento utilizando los métodos de 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)

Para el tamaño de la pantalla, puede utilizar el objeto de la screen de la siguiente manera:

screen.height;
screen.width;

Si necesita una solución realmente a prueba de balas para el ancho y el alto del documento ( pageWidth y pageHeight en la imagen), puede considerar usar un complemento mío, jQuery.documentSize .

Tiene un solo propósito: devolver siempre el tamaño de documento correcto, incluso en escenarios en los que jQuery y otros métodos fail . A pesar de su nombre, no necesariamente tiene que usar jQuery, está escrito en Javascript de vainilla y también funciona sin jQuery .

Uso:

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

para el document global. Para otros documentos, por ejemplo, en un iframe incrustado al que tiene acceso, pase el documento como un parámetro:

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

Actualización: ahora también para las dimensiones de la ventana

Desde la versión 1.1.0, jQuery.documentSize también maneja las dimensiones de la ventana.

Eso es necesario porque

  • $( window ).height() está $( window ).height() en iOS , hasta el punto de ser inútil
  • $( window ).width() y $( window ).height() no son confiables en el móvil porque no manejan los efectos del zoom móvil.

jQuery.documentSize proporciona $.windowWidth() y $.windowHeight() , que resuelven estos problemas. Para más información, por favor revisa la documentación .


Una forma no jQuery de obtener la dimensión de pantalla disponible. window.screen.width/height ya se ha instalado, pero para un diseño web receptivo y una completa integridad, creo que vale la pena mencionar esos atributos:

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

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

availWidth and availHeight - El ancho y la altura disponibles en la pantalla (excluyendo las barras de tareas del sistema operativo y demás).


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






cross-browser