css - moz - Media Consultas min-width que no se activa correctamente en Opera, FF e IE

webkit css

Question

Uso consultas de medios en una página http://test.lovecpokladu.cz/detail-mince?id=2461 de esta manera:

@media all and (min-width: 660px) {
    ... styles for box decoration ...
}

y use esta etiqueta meta viewport:

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

Cuando cambio el tamaño de la ventana de Chrome a 660 px (midiendo solo la página HTML, no los bordes de la ventana), los estilos se aplican correctamente. Los estilos no se aplican en 659px, que es correcto.

El problema es con Opera, IE y Firefox. Los estilos se aplican a medida que el ancho toca alrededor de 642px: observo que estos navegadores generan min-width más rápido con más contenido incluso en condiciones de ancho máximo e incluso en otro sitio web (creado por mí).

¿Dónde prodría estar el problema?

¡Muchas gracias!

Answer 1

Acabo de tener el mismo problema y encontré una solución, al menos para mí. No lo probé mucho, así que por favor avíseme si hay algo que no consideré.

En la consulta de medios, establecí el ancho mínimo del cuerpo en el mínimo ancho de la consulta de medios. ¡Funciona!

@media only screen
and (min-width : 1060px) {
    body{
        min-width: 1060px;
    }
    #main-content{
        text-align: right;
        padding-left: 0;
    }
}

Hice un ejemplo para este problema y solución aquí:

http://gehirnstroem.at/media-query.htm

http://gehirnstroem.at/media-query-solved.htm

Answer 2

Problema en el ancho de la barra de desplazamiento en BODY o HTML: es aproximadamente 16-18px.

¿Qué hacer?

1. Mala solución: configurada en BODY o HTML overflow-y: scroll .
2. Solución experimental: intente mover la barra de desplazamiento de BODY o HTML al primer contenedor DIV.

Al igual que:

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }