Problem z zapytaniami o media CSS (pasek przewijania)

Question

Mam problem z zapytaniem o media css w przeglądarce Firefox. Działa poprawnie w Chrome, tak jak zrobiłem dwa DIV i chcę pasek przewijania. Jeśli zmniejszę rozmiar ekranu firefox do 800px, oba DIV zwiną się i po jakimś pikselowym zapytaniu o media działa, ale to nie dzieje się w Chrome.

check to skrzypce przeglądarek opartych http://jsfiddle.net/RMvqC/2/

Answer 1

Firefox & Webkit uczynić przewijania inaczej. W Firefoksie MediaQuery rozważała szerokość paska przewijania, który ma 15 pikseli przy szerokości ekranu, ale w przeglądarkach opartych na Webkitach nie jest uważany za pasek przewijania z szerokością ekranu. Dlatego pływające DIV są zwinięte w Firefoksie.

Zrobiłem kilka rzeczy z css może to ci pomóc. (Sprawdź 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

można wdrożyć rozwiązanie dla Firefoksa dość łatwo za pomocą CSS-Hack. Po owinięciu treści w dodatkowym <div> dodać to linie do swojego CSS:

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

Sprawdź jsbin (jsfiddle jest w dół teraz)

Aby mieć bogatszą czułe doświadczenie można dodać kolejne zapytanie mediów: another jsbin

CSS-Hack został znaleziony w paulirish.com

Answer 3

Firefox & Opera następująco W3C specyfikację, która ma zawierać szerokość paska przewijania w Med np. szerokość zapytań (powodem może być uniknięcie nieskończonej pętli, jak opisano w a comment here), podczas gdy Webkit nie (prawdopodobnie nie sądzi, że to nie ma sensu)

Istnieje obejście (testowałem to tylko na FF) , Najwyraźniej, jeśli pasek przesuwu będzie widoczny cały czas, szerokość będzie teraz zgodna z Webkit. Oto kod:

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 */ 
} 

Jeśli chcesz zastosować to do FF & Opera tylko można uciekać się do sztuczek 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%; 
} 

Jest rzeczą oczywistą, zastrzeżenie jest pasek przewijania będzie widoczna przez cały czas, co może być dobrym kompromisem.

Answer 4

ROZWIĄZYŁAMY ten problem, nazywając javascript "mqGenie" w nagłówku mojego projektu.

Teraz szerokości moich zapytań o media działają dobrze (z tą samą wartością) w Chrome, Safari, Firefox i IE z lub bez scroolbars.

Ten javascript Dostosowuje zapytania o media CSS w przeglądarkach, które obejmują szerokość paska przewijania w szerokości okna, aby strzelały do ​​zamierzonego rozmiaru.

Można go pobrać z tego adresu URL:

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

Answer 5

To obwodowo związane, ale znalazł sposób wykryje, w których media-maila przeglądarka jest faktycznie przy użyciu w każdej chwili, bez konieczności grzebiąc się z paskiem przewijania i szerokością ciała ...

Zasadniczo zdefiniuj bezwzględnie umieszczoną listę rozmiarów 1-x-1 piksela gdzieś w ciele, z pozycją listy dla każdego warunku zapytania o media, który chcesz "obejrzeć".

Następnie w każdej definicji zapytania o media, pokaż/ukryj odpowiedni element listy, a następnie po prostu sprawdź, czy dany element jest widoczny w skrypcie.

Przykład:

<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>