con le query multimediali CSS (barra di scorrimento)

Question

Ho riscontrato problemi con la query media css in Firefox. Funziona correttamente in Chrome come ho fatto due DIV e voglio una barra di scorrimento. Se diminuisco le dimensioni dello schermo di firefox fino a 800px, allora entrambi i DIVs crollano e dopo alcuni pixel la query sui media funziona ma ciò non accade in Chrome.

controllo questo violino browser basati http://jsfiddle.net/RMvqC/2/

Answer 1

Firefox & Webkit rendono la barra di scorrimento in modo diverso. In Firefox, MediaQuery ha considerato la larghezza della barra di scorrimento che è 15px con la larghezza dello schermo, ma nei browser basati su Webkit non è considerata una barra di scorrimento con la larghezza dello schermo. Quindi, ecco perché i DIV flottanti sono compressi in Firefox.

Ho fatto un po 'di roba con CSS potrebbe essere che ti aiuta. (Controllare this fiddle)

 html { 
      /* force scrollbars */ 
      height: 101%; 
     } 
     body { 
      margin: 0; 
      padding:0; 
      white-space:nowrap; 
     } 
     #box1, 
     #box2 { 
      display:inline-block; 
      width: 400px; 
      height: 200px; 
      vertical-align:top; 
      white-space:normal; 
     } 
     #box1 { 
      background: #ce0000; 
      margin-right:-5px; 
     } 
     #box2 { 
      background: #8e0000; 
     } 

     @media screen and (max-width: 799px) { 
      body { 
       white-space:normal; 
      } 
      #box1, 
      #box2 { 
       width: 300px; 
      } 
     } 

Answer 2

è possibile implementare una soluzione per Firefox abbastanza facilmente utilizzando un CSS-hack. Dopo avvolgendo il contenuto di un extra <div> aggiungere queste righe al CSS:

/* Firefox-Hack */ 
body, x:-moz-any-link { 
    overflow-x: hidden; 
} 
#wrapper, x:-moz-any-link { 
    margin: 0 -7.5px; 
} 

Controllare il jsbin (jsfiddle è giù in questo momento)

Per avere più ricca esperienza reattivo si potrebbe aggiungere un altro media query: another jsbin

Il CSS-hack è stato trovato a paulirish.com

Answer 3

Firefox & Opera segue specifica W3C, che è quello di includere la larghezza della barra di scorrimento in Med ia query larghezza (il motivo potrebbe essere evitare il ciclo infinito come descritto in a comment here), mentre Webkit non lo fa (forse perché pensano che non abbia senso)

C'è una soluzione alternativa (l'ho provato solo su FF) , apparentemente se si forza la barra di scorrimento per essere sempre visibili, allora la larghezza sarà coerente con Webkit. Ecco il codice:

html 
{ 
    overflow:hidden; 
    height:100%; 
} 
body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
    -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */ 
} 

Se si desidera applicare questo per & FF Opera unica, si può ricorrere a hack CSS:

/* Firefox */ 
@-moz-document url-prefix() 
{ 
    html 
    { 
     overflow:hidden; 
     height:100%; 
    } 
    body 
    { 
     position:relative; 
     overflow-y:scroll; 
     height:100%; 
     /*-webkit-overflow-scrolling:touch;*/ 
    } 
} 

/* Opera */ 
x:-o-prefocus, html 
{ 
    overflow:hidden; 
    height:100%; 
} 
x:-o-prefocus, body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
} 

Va da sé, l'avvertimento è la barra di scorrimento sarà visibile in ogni momento, che potrebbe essere un buon compromesso.

Answer 4

Ho risolto questo problema chiamando il javascript "mqGenie" nella testa del mio progetto.

Ora la larghezza delle mie media query funziona bene (con lo stesso valore) su Chrome, Safari, Firefox e IE con o senza scroolbars.

Questo javascript Regola le query multimediali CSS nei browser che includono la larghezza della barra di scorrimento nella larghezza della finestra di visualizzazione in modo che vengano attivate alle dimensioni desiderate.

È possibile scaricarlo da questo URL:

http://stowball.github.io/mqGenie/

Answer 5

Questo è perifericamente correlato, ma ho trovato un modo per rilevare che i media-query il browser è in realtà utilizzando in qualsiasi momento, senza dover muck around con scrollbar e larghezza del corpo ...

Fondamentalmente, definire una lista di dimensioni 1-x-1 pixel posizionata in modo assoluto da qualche parte nel proprio corpo, con un elemento di elenco per ogni condizione di query multimediale che si desidera essere "controllabile".

Quindi, in ciascuna definizione di query multimediale, mostrare/nascondere l'elemento di elenco corrispondente e quindi verificare semplicemente se quell'elemento è visibile all'interno dello script.

Esempio:

<body> 
    ... 
    <ul id="mediaQueryHelper"> 
     <li id="desktop"></li> 
    </ul> 
</body> 

<style type="text/less"> 
    #mediaQueryHelper { 
     position: absolute; 
     height: 1px; 
     width: 1px; 
     visibility: hidden; 
     top: -999px; 
     left: -999px; 
    } 

    @media screen and (min-width: 481px) 
    { 
     #desktop { display: inline; } 
    } 

    @media screen and (min-width: 320px) and (max-width: 480px) 
    { 
     #desktop{ display: none; } 
    } 

</style> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var _desktop = $("#desktop"); 

     $(window).resize(function() { 
      console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE"); 
     }); 
    }); 
</script>