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

У меня проблема с запросом css media в Firefox. Он работает корректно в Chrome, как я сделал два DIV и хочу прокрутку. Если я уменьшу размер экрана firefox до 800px, тогда оба DIVs рухнут и после некоторого пиксельного мультимедийного запроса, но это не произойдет в Chrome.

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

Ответ 1

Браузеры 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;
            }
        }

Ответ 2

Я решил эту проблему, назвав jQuery "mqGenie" во главе моего проекта.

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

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

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

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

Ответ 3

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%;
}

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

Ответ 4

Вы можете легко реализовать решение для 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-hack был найден в paulirish.com

Ответ 5

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

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

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

Пример:

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