outerwidth - window screen javascript

imparidad innerWidth y outerWidth en el escritorio

Question

Abra la consola en cromo (mientras está en SO) y copie en innerWidth + "|"+outerWidth + "|" + screen.width innerWidth + "|"+outerWidth + "|" + screen.width , para mí esto devolverá 2133|1920|1920 , al innerWidth el innerWidth es mayor que el outerWidth ... Como si esto no fuera lo suficientemente extraño, probé a ejecutar este código en firefox y devuelve 1920|1936|1920 . outerWidth mi outerWidth es mayor que el tamaño de mi pantalla. (Todas las pantallas fueron maximizadas normalmente). Curiosamente, ejecutar el mismo código en una página ''normal'' (no stackoverflow) devolverá 1920|1920|1920 en Chrome, pero aún así insiste en que mi outerWidth es mayor que mi pantalla.

He buscado en Google, encontré un par de artículos sobre la funcionalidad de los dispositivos móviles, pero nada parece explicar ninguna de las observaciones anteriores.

Answer 1

Hay una diferencia entre obtener de innerWidth y outerWidth. Mira las definiciones oficiales:

Window.innerWidth: es el ancho (en píxeles) de la ventana de la ventana del navegador que incluye, si se representa, la barra de desplazamiento vertical.

Window.outerWidth: El atributo outerWidth debe devolver el ancho de la ventana del cliente.

Como puede ver, innerWidth se ha vinculado al ancho de la ventana gráfica, mientras que outerWidth se ha vinculado al ancho de la ventana del navegador .

Por lo tanto, outerWidth puede ser menor que innerWidth cuando la página solo se acerca , o la vista de página se amplía. Creo que debes indicar la etiqueta de seguimiento en tu página:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Hará que la página se comporte como se esperaba (se ajusta a los límites de ancho de la pantalla) en vistas pequeñas.

Y como una posible causa de un gran ancho interno son los scripts o estilos que pueden cambiar las dimensiones de la ventana.

Answer 2

Una razón por la cual innerWidth podría ser más grande que outerWidth es si su navegador está outerWidth . Obtuve los siguientes resultados con el navegador en modo de pantalla completa:

zoom  inner  outer
75%   1706   1280
90%   1422   1280
100%  1280   1280
110%  1164   1280

La única forma en que podría conseguir que outerWidth sea ​​más grande que screen.width es cambiando el ancho de la ventana arrastrando.