que - Las consultas de medios CSS y el ancho de la ventana de JavaScript no coinciden

javascript descargar

Question

Para una plantilla receptiva, tengo una consulta de medios en mi CSS:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

Y realicé una función jQuery para cambiar el tamaño del ancho del registro:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

Y hay una diferencia con la detección de CSS y el resultado de JS, tengo este meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

Supongo que se debe a la barra de desplazamiento (15 px). ¿Cómo puedo hacer esto mejor?

Answer 1

Encontré el siguiente código en http://www.w3schools.com/js/js_window.asp :

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

Prácticamente funciona de la misma manera que la respuesta en la respuesta de @Michael Bird, pero es más fácil de leer.

Editar: Estaba buscando un método para dar exactamente el mismo ancho que se usa para las consultas de medios css. Pero el sugerido no funciona perfecto en Safari con barras de desplazamiento, lo siento. Terminé usando modernizr.js en una función central y en el resto del código solo compruebo si el tipo de pantalla es móvil, tableta o computadora de escritorio. Como no estoy interesado en el ancho, esto funciona bien para mí:

getDisplayType = function () {
  if (Modernizr.mq(''(min-width: 768px)'')){
    return ''desktop'';
  }
  else if (Modernizr.mq(''(min-width: 480px)'')){
    return ''tablet''
  }
  return ''mobile'';
};

Answer 2

Hola, utilizo este pequeño truco para hacer que JS y CSS funcionen juntos fácilmente en las páginas receptivas:

Pruebe la visibilidad de un elemento mostrado o no en la condición de tamaño de CSS @media. Usando bootstrap CSS pruebo la visibilidad de un elemento de clase hidden-xs

var msg = "a message for U";

/* At window load check initial size  */
if ( $(''#test-xsmall'').is('':hidden'')  ) {
  /* This is a CSS Xsmall situation ! */
  msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
  $(''.redthing-on-xsmall'').addClass(''redthing'').html(msg);

} else {
  /* > 768px according to CSS  */
  msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
  $(''.redthing-on-xsmall'').removeClass(''redthing'').html(msg);
}


/* And again when window resize  */

$(window).on(''resize'', function() {
  if ($(''#test-xsmall'').is('':hidden'')) {
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
    $(''.redthing-on-xsmall'').addClass(''redthing'').html(msg);
  } else {
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
    $(''.redthing-on-xsmall'').removeClass(''redthing'').html(msg);
  }
});

@media (min-width: 768px) {
  .hidden-xs {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
.redthing-on-xsmall {
  /* need a scrollbar to show window width diff between JS and css */
  min-height: 1500px;
}
.redthing {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- the CSS managed Element that is tested by JS --> 
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->

<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS  HIDDEN on @media lower than 767px</span>


<!-- the responsive element managed by Jquery  -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Answer 3

La consulta de Css Media es igual a window.innerWidth. Css Media Queries también calcula la barra de desplazamiento.

Answer 4

Mi experiencia fue que el ancho de la consulta de medios sigue document.body.clientWidth. Debido a que una barra de desplazamiento vertical va y viene, revisar el ancho de documento, ventana o ventana () podría hacer que mi Javascript se ejecute tarde, después de que la regla de consulta de medios cambie, dependiendo de la altura de la ventana.

La comprobación de document.body.clientWidth permitió que el código de script se ejecutara de forma consistente al mismo tiempo que la regla de consulta de medios surtió efecto.

@media (min-width: 873px) {
//algunas reglas
}
...

if (document.body.clientWidth> = 873) {
// algún código
}

El código de Andy Langton me puso en esto, ¡gracias!

Answer 5

Solución que siempre funciona y se sincroniza con las consultas de medios de CSS.

Agrega un div al cuerpo

<body>
    ...
    <div class=''check-media''></div>
    ...
</body>

Agregue estilo y cámbielos al ingresar en una consulta de medios específica

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

Luego, en JS, compruebe el estilo que está cambiando al ingresar en la consulta de medios.

if($(''.check-media'').width() == 768){
    console.log(''You are in (max-width: 768px)'');
}else{
    console.log(''You are out of (max-width: 768px)'');
}

Por lo general, puede verificar cualquier estilo que se está modificando al ingresar a una consulta de medios específica.

Answer 6

Tiene razón acerca de la barra de desplazamiento, es porque CSS usa el ancho del dispositivo, pero el JS usa el ancho del documento.

Lo que debe hacer es medir el ancho de la ventana gráfica en su código JS en lugar de usar la función de ancho jQuery.

Este código es de http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = ''inner'';
    if (!(''innerWidth'' in window )) {
        a = ''client'';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+''Width'' ] , height : e[ a+''Height'' ] };
}

Answer 7

window.innerWidth es lo que necesitas.

if (window.innerWidth <768) funciona para 768 punto de corte en CSS