проблема с медиазапросами CSS (полоса прокрутки)

Question

У меня проблема с медиа-запросом CSS в Firefox.В Chrome все работает правильно, как будто я сделал два DIV и хочу полосу прокрутки.Если я уменьшу размер экрана Firefox до 800 пикселей, то оба DIV рухнут, и после того, как медиа-запрос с некоторыми пикселями сработает, но в Chrome этого не произойдет.

отметьте эту скрипку http://jsfiddle.net/RMvqC/2/

Answer 1

Я решил эту проблему, вызвав javascript «mqGenie» в главе моего проекта.

Теперь ширина моих медиа-запросов работает нормально (с одинаковым значением) в Chrome, Safari, Firefox и IE с или без скроллбаров.

Этот javascript настраивает медиазапросы CSS в браузерах, которые включают ширину полосы прокрутки в ширину области просмотра, так что они запускаются в нужном размере.

Вы можете скачать его с этого URL:

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

Answer 2

Firefox & Opera следует спецификации W3C, которая включает ширину полосы прокрутки в ширину медиазапросов (причина может заключаться в том, чтобы избежать бесконечного цикла, как описано в комментарии здесь ), в то время как Webkit нет (возможно, потому что они думаю нет смысла)

Существует обходной путь (я проверял это только на FF), очевидно, если вы заставите полосу прокрутки быть видимой все время, то ширина теперь будет соответствовать Webkit. Вот код:

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

Если вы хотите применить это только к FF & Opera, вы можете прибегнуть к 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%;
}

Само собой разумеется, предостережение в том, что полоса прокрутки будет видна всегда, что может быть хорошим компромиссом.

Answer 3

Браузеры на базе Firefox и Webkit отображают полосу прокрутки по-разному.В Firefox MediaQuery рассматривал ширину полосы прокрутки, которая составляет 15 пикселей от ширины экрана, но в браузерах на основе Webkit она не считается полосой прокрутки с шириной экрана.Так вот почему плавающие DIVs свернуты в Firefox.

Я сделал кое-что с CSS, возможно, это поможет вам.(отметьте эту скрипку )

        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 4

Играйте безопасно!

Моя окончательная стратегия добавляется к медиазапросам на 20 пикселей, и это мой пробел по умолчанию в макете.

За одним исключением: @media (min-width: 320px) При таком размере aне оставляйте пробелы в 20px и включите еще одно правило для решения незначительных фоновых проблем:

html body {
    min-width: 320px;
   }

20px - это размер ширины полосы прокрутки по умолчанию.

FYI: https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

Answer 5

Это связано с периферией, но я нашел способ определить, какой медиа-запрос на самом деле использует браузер в данный момент, без необходимости перебирать полосу прокрутки и ширину тела ...

По сути, определите абсолютно позиционированный список размером 1 x x 1 пиксель где-нибудь в своем теле, с элементом списка для каждого условия медиазапроса, который вы хотите «наблюдать».

Затем в каждом определении медиа-запроса показывайте / скрывайте соответствующий элемент списка, а затем просто проверяйте, виден ли этот элемент из вашего скрипта.

Пример:

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

Answer 6

Вы можете довольно легко реализовать решение для Firefox, используя CSS-хак. После добавления вашего контента в дополнительные <div> добавьте следующие строки в ваш CSS:

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

Проверьте jsbin (jsfiddle сейчас недоступен)

Для более удобного реагирования вы можете добавить еще один медиазапрос: еще один jsbin

CSS-хак был найден на paulirish.com