Busqué en google esto y tengo un quirksmode sitio que usted le da a su tamaño de pantalla. Tirando hacia arriba de la consola veo que screen.width y screen.height están disponibles directamente desde la ventana de objetos.

Quiero hacer la detección en JavaScript puro para empezar. Puedo utilizar esta propiedad a través de todos los dispositivos y navegadores – móvil, tablet, PC y Chrome, Safari, IE, Firefox.

No me importa la opinión de puerto cambiando debido a la re-dimensionamiento etc. Sólo el tamaño real de la pantalla que no cambia.

Tenía la esperanza de que hubo una sola propiedad que yo pudiera ver a través de dispositivos y navegadores.

Aquí hay alguna información general por wikipedia en responsive web design.

  • «Yo quiero hacer esto en JavaScript puro para empezar». — No hagas eso. CSS en su lugar.
  • Mi pregunta – How to detect screen size for responsive web design? – puedo usar consultas de medios para obtener este valor?
  • — ¿Por qué me recomiendan que el uso de ellos si no podía?
  • RWD se hace con técnicaconsultas en el 90% de webprojects. Se vuelve muy desordenado, bastante rápido, cuando se trata de hacer un diseño sensible con javascript puro. Al menos usar un framework como bootstrap o similar, si desea hacerlo sólo con javascript.
  • Lo más probable es que el uso de media queries, pero quiero registro de la x y la y dimensiones de cada uno de los usuarios de la pantalla la primera vez que lo inicio de sesión. Esto es a lo que me refería empezado con JS. De esta forma, se puede caracterizar lo que las pantallas de la que estoy trabajando antes de escribir las consultas de medios CSS.
InformationsquelleAutor Zen-Lee Chai | 2015-07-01

3 Comentarios

  1. 23

    Echa un vistazo a Obtener el dispositivo de ancho en javascript

    Preguntas de los medios de trabajo en js demasiado:

    if (window.matchMedia('screen and (max-width: 768px)').matches) {}

    Otra forma sería:

    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    • Pero no son compatibles en IE8 – por desgracia..
  2. 0

    Esto es lo que ha funcionado para mí después de un largo corazonada.
    Estos atributos por debajo de proporcionar respuesta de tamaños basados en la nueva ficha tamaño.

    window.innerWidth
    window.innerHeight

Dejar respuesta

Please enter your comment!
Please enter your name here