jquery - change - $(window).width() no es lo mismo que consulta de medios

set width jquery

Question

Estoy usando Twitter Bootstrap en un proyecto. Además de los estilos de arranque predeterminados, también he agregado algunos de los míos

//My styles
@media (max-width: 767px)
{
//CSS here
}

También estoy usando jQuery para cambiar el orden de ciertos elementos en la página cuando el ancho de la ventana es inferior a 767px.

$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
}
}

El problema que estoy teniendo es que el ancho calculado por $(window).width() y el ancho calculado por el CSS no parece ser el mismo. Cuando $(window).width() devuelve 767, css calcula el ancho de la ventana como 751, por lo que parece haber un 16px diferente.

¿Alguien sabe qué está causando esto y cómo podría resolver el problema? La gente ha sugerido que el ancho de la barra de desplazamiento no se tiene en cuenta y usar $(window).innerWidth() < 751 es el camino a seguir. Sin embargo, idealmente, quiero encontrar una solución que calcule el ancho de la barra de desplazamiento y que sea coherente con mi consulta de medios (por ejemplo, donde ambas condiciones se comparan con el valor 767). Porque seguramente no todos los navegadores tendrán un ancho de barra de desplazamiento de 16 px.

Answer 1

Aquí hay un truco menos complicado para tratar las consultas de los medios. El soporte de navegador cruzado es un poco limitante ya que no es compatible con IE móvil.

 if (window.matchMedia(''(max-width: 694px)'').matches)
{
//do desired changes
}

Consulte la documentación de Mozilla para más detalles.

Answer 2

Aquí hay una alternativa a los métodos mencionados anteriormente que se basan en cambiar algo a través de CSS y leerlo a través de Javascript. Este método no necesita window.matchMedia o Modernizr. Tampoco necesita ningún elemento HTML adicional. Funciona mediante el uso de un pseudo-elemento HTML para ''almacenar'' la información del punto de interrupción:

body:after {
visibility: hidden;
height: 0;
font-size: 0;
}
@media (min-width: 20em) {
body:after {
content: "mobile";
}
}
@media (min-width: 48em) {
body:after {
content: "tablet";
}
}
@media (min-width: 64em) {
body:after {
content: "desktop";
}
}

Usé el body como ejemplo, puedes usar cualquier elemento HTML para esto. Puede agregar cualquier cadena o número que desee al content del pseudo-elemento. No tiene que ser ''móvil'', etc.

Ahora podemos leer esta información de Javascript de la siguiente manera:

var breakpoint = window.getComputedStyle(document.querySelector(''body''), '':after'').getPropertyValue(''content'').replace(/"/g,'''');
if (breakpoint === ''mobile'') {
doSomething();
}

De esta manera, siempre estamos seguros de que la información del punto de interrupción es correcta, ya que proviene directamente de CSS y no tenemos que preocuparse por obtener el ancho de pantalla correcto a través de Javascript.

Answer 3

Deslizador pulido de implementación y muestra diferentes números de diapositivas en el bloque dependiendo de la resolución (jQuery)

 if(window.matchMedia(''(max-width: 768px)'').matches) {
$(''.view-id-hot_products .view-content'').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
});
}
if(window.matchMedia(''(max-width: 1024px)'').matches) {
$(''.view-id-hot_products .view-content'').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
});
}

Answer 4

Javascript proporciona más de un método para verificar el ancho de la ventana gráfica. Como ha notado, innerWidth no incluye el ancho de la barra de herramientas, y el ancho de la barra de herramientas será diferente en todos los sistemas. También está la opción outerWidth , que incluirá el ancho de la barra de herramientas. La API de JavaScript de Mozilla dice:

Window.outerWidth obtiene el ancho del exterior de la ventana del navegador. Representa el ancho de toda la ventana del navegador, incluida la barra lateral (si está expandida), la ventana cromada y el cambio de tamaño de bordes / controladores.

El estado de JavaScript es tal que uno no puede confiar en un significado específico para outerWidth en cada navegador en cada plataforma.

outerWidth no está bien soportado en navegadores móviles más antiguos , aunque goza de soporte en los principales navegadores de escritorio y en la mayoría de navegadores de teléfonos inteligentes más nuevos.

Como señaló ausi, matchMedia sería una gran opción ya que CSS está mejor estandarizado (matchMedia usa JS para leer los valores de ventana gráfica detectados por CSS). Pero incluso con estándares aceptados, existen navegadores retardados que los ignoran (IE <10 en este caso, lo que hace que matchMedia no sea muy útil al menos hasta que XP fallezca).

En resumen , si solo está desarrollando para navegadores de escritorio y navegadores móviles más nuevos, outerWidth debería darle lo que está buscando, con algunas advertencias .

Answer 5

La mejor solución entre navegadores es usar Modernizr.mq

enlace: https://modernizr.com/docs/#mq

Modernizr.mq le permite verificar programáticamente si el estado actual de la ventana del navegador coincide con una consulta de medios.

var query = Modernizr.mq(''(min-width: 900px)'');
if (query) {
// the browser window is larger than 900px
}

Nota El navegador no es compatible con las consultas de medios (por ejemplo, antiguo IE) mq siempre devolverá falso.

Answer 6

Prueba esto

if (document.documentElement.clientWidth < 767) {
// scripts
}

Para más referencia, haga clic here

Answer 7

Puede ser debido a la scrollbar de scrollbar , use innerWidth lugar de width como

if($(window).innerWidth() <= 751) {
$("#body-container .main-content").remove()
.insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove()
.insertAfter($("#body-container .left-sidebar"));
}

También puedes obtener la viewport como

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'' ] };
}

Sobre el código Source

Answer 8

Recientemente tuve el mismo problema, también con Bootstrap 3.

Ni $ .width () ni $ .innerWidth () funcionarán para usted.

La mejor solución que se me ocurrió - y está especialmente diseñada para BS3 -
es verificar el ancho de un elemento .container .

Como probablemente sepa cómo funciona el elemento .container ,
es el único elemento que le dará el ancho actual establecido por las reglas BS CSS.

Así que va algo así como

bsContainerWidth = $("body").find(''.container'').width()
if (bsContainerWidth <= 768)
console.log("mobile");
else if (bsContainerWidth <= 950)
console.log("small");
else if (bsContainerWidth <= 1170)
console.log("medium");
else
console.log("large");

Answer 9

Si no tiene que admitir IE9, puede usar window.matchMedia() ( documentación de MDN ).

function checkPosition() {
if (window.matchMedia(''(max-width: 767px)'').matches) {
//...
} else {
//...
}
}

window.matchMedia es totalmente coherente con las consultas de medios de CSS y la compatibilidad con el navegador es bastante buena: http://caniuse.com/#feat=matchmedia

ACTUALIZAR:

Si tiene que admitir más navegadores, puede usar el método mq de Modernizr , que es compatible con todos los navegadores que entienden las consultas de medios en CSS.

if (Modernizr.mq(''(max-width: 767px)'')) {
//...
} else {
//...
}

Answer 10

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 11

Tal vez sea una mejor práctica no para JS-alcance el ancho del documento, pero algún tipo de cambio realizado por css @media consulta. Con este método, puede estar seguro de que la función JQuery y el cambio de CSS ocurren al mismo tiempo.

css:

#isthin {
display: inline-block;
content: '''';
width: 1px;
height: 1px;
overflow: hidden;
}
@media only screen and (max-width: 990px) {
#isthin {
display: none;
}
}

jquery:

$(window).ready(function(){
isntMobile = $(''#isthin'').is(":visible");
...
});
$(window).resize(function(){
isntMobile = $(''#isthin'').is(":visible");
...
});

Answer 12

Utilizar

window.innerWidth

Esto resolvió mi problema

Answer 13

Verifique una regla CSS que cambie la consulta de medios. Esto está garantizado para siempre funcionar.

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML:

<body>
...
<div id="mobile-indicator"></div>
</body>

Javascript:

function isMobileWidth() {
return $(''#mobile-indicator'').is('':visible'');
}

CSS:

#mobile-indicator {
display: none;
}
@media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}

Answer 14

sí, eso se debe a la barra de desplazamiento. Fuente de respuesta correcta: ingrese la descripción del enlace aquí

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'' ] };
}