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




cambio calcular (15)

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.

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


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


Ahora podemos usar de forma segura la API nativa de la ventana de JavaScript en todos los navegadores , sin el contexto de la ventana.

¡La sintaxis es 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 obtener resultados precisos en todos los navegadores y dispositivos, los resultados deben multiplicarse por el dispositivoPixelRatio .

La propiedad de la ventana devicePixelRatio devuelve la proporción de la resolución en píxeles físicos a la resolución en píxeles CSS para el dispositivo de visualización actual. Este valor también podría interpretarse como la proporción de tamaños de píxeles: el tamaño de un píxel CSS al tamaño de un píxel físico. En términos más simples, esto le dice al navegador cuántos píxeles reales de la pantalla deben usarse para dibujar un solo píxel CSS.

Esto es útil cuando se trata de la diferencia entre la representación en una pantalla estándar en comparación con una pantalla HiDPI o Retina, que utiliza más píxeles de la pantalla para dibujar los mismos objetos, lo que resulta en una imagen más nítida.

No hay forma de recibir notificaciones cuando se cambia este valor (lo que puede suceder, por ejemplo, si el usuario arrastra la ventana a una pantalla con una densidad de píxeles diferente). Como no hay devoluciones de llamada o eventos disponibles para detectar cambios en la densidad de píxeles, la única forma de hacerlo es verificar periódicamente el valor de devicePixelRatio para ver si ha cambiado. Simplemente no lo hagas muy a menudo, o impactarás el rendimiento.

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


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;

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


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

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;

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.



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


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 .


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)

Puedes usar el objeto Screen para obtener esto.

El siguiente es un ejemplo de lo que devolvería:

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

Para obtener su variable screenWidth , solo use screen.width , lo mismo que con screenHeight , solo usaría screen.height .

Para obtener el ancho y el alto de su ventana, sería screen.availWidth o screen.availHeight respectivamente.

Para las variables pageX y pageY , use window.screenX or Y Tenga en cuenta que esto es de la PANTALLA MUY IZQUIERDA / SUPERIOR DE SU PANTALLA IZQUIERDA / SUPERIOR . Entonces, si tiene dos pantallas de ancho 1920 entonces una ventana de 500px desde la izquierda de la pantalla derecha tendría un valor de X de 2420 (1920 + 500). screen.width/height , sin embargo, muestra el ancho o la altura de la pantalla ACTUAL.

Para obtener el ancho y el alto de su página, use $(window).height() o $(window).width() .

Nuevamente utilizando jQuery, use $("html").offset().top y $("html").offset().left pageX para su pageX y los valores de pageY .


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.


La forma correcta de formatear una fecha para devolver "2012-12-29" es con el script desde el formato de fecha de JavaScript :

var d1 = new Date();
return d1.format("dd-m-yy");

Este código NO funciona:

var d1 = new Date();
d1.toString('yyyy-MM-dd');      




javascript jquery layout cross-browser