La guía paso a paso o código que verás en este post es la resolución más eficiente y efectiva que hallamos a esta duda o problema.
Solución:
Está algo implícito en los nombres. 🙂 window.innerWidth es el ancho interior de la ventana o más exactamente mirador (sin incluir barras de herramientas, cromo de ventana, etc.; pero incluyendo el espacio ocupado por la barra de desplazamiento vertical, si la hubiere). screen.width es el ancho de la pantalla (no solo la ventana del navegador).
Entonces, por ejemplo, ahora mismo la ventana de mi navegador tiene una innerWidth de 1197, pero si lo hago más ancho podría ser (digamos) 1305. Por la resolución de mi pantalla es 1920×1080, entonces screen.width en mi máquina siempre será 1920, independientemente del tamaño de la ventana de mi navegador.
Pero lo más importante, he oído que uno de ellos usa píxeles físicos y el otro usa píxeles lógicos.
Se supone que ambos deben estar en píxeles CSS que supongo que llamarías “lógico” screen.width, innerWidth. El borrador dice que todas las medidas en él están en píxeles CSS a menos que se indique lo contrario, y ninguna de esas propiedades indica lo contrario. Si hay implementaciones que usan píxeles físicos para una y píxeles CSS para otra, no he oído hablar de ellas (pero no estoy seguro de que necesariamente lo haya hecho).
screen.width es el ancho de la pantalla. Por ejemplo, si su pantalla tiene una resolución de 1600×900, screen.width siempre será 1600.
window.innerWidth sin embargo, es el ancho interior de la ventana del navegador. Si cambia el tamaño de la ventana del navegador, window.innerWidth cambiará.
Sección de Reseñas y Valoraciones
Eres capaz de añadir valor a nuestro contenido informacional tributando tu veteranía en las observaciones.