1

説明が長すぎる場合は申し訳ありませんが、できるだけ多くの情報を提供しようとしています。
最近、問題が発生しました（修正しましたが、なぜそれが起こったのかわかりません）。
問題は、幅 768 ピクセルなど、ブラウザーのサイズを変更すると、メディア クエリが機能しないことでした。そして、動作させるために、ブラウザの幅をさらに約 20 ～ 30 ピクセル縮小する必要がありました。

まもなく、たとえば幅が 750px 未満の場合、768px のメディア クエリが機能していました。 ここに単純化されたコードがあります。
HTML:

<div id="wrapper">
    <header id="header">
        <a href="" class="logo">
        <img src="images/logo-wide.png" alt="logo" />
        </a>
        <a id="menu_button" href="#">menu</a>
        <nav id="nav">
            <ul id="menu">
                <li><a href="" class="home">Home</a></li>
                <li><a href="" class="services">Services</a>
                ... more navidation list items
            </ul>
        </nav>
    </header>
    ... more code which is not relevant
</div>

CSS:

@media screen and (max-width: 768px) 
{
    div#wrapper
    {
        max-width:768px;
        margin:0 auto;
    }
    a.logo
    {
        display:block;
        float:left;
        width:80%;
        padding:25px 0;
        height:33px;
    }
    a#menu_button
    {
        width:20%;
        float:left;
        display:block;
        padding:50px 0 15px;
        height:18px;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        width:100%;
        float:left;
        display:none;
    }
    ul#menu ul
    {
        display:none;
    }
    ul.sub.active
    {
        display:block !important;
    }
    ul#menu li
    {
        float:none;
    }
    ul#menu a
    {
        width:100%;
        padding:20px 0;
        text-align:left;
        text-indent: 70px;
        display:block;
        margin-top: 1px;
    }
}

@media screen and (min-width: 769px) 
{
    div#wrapper
    {
        max-width:960px;
        margin:5px auto;
    }
    a.logo
    {
        display:block;
        float:left;
        padding:20px 35px;
    }
    a#menu_button
    {
        display:none;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        float:right;
        display:block;
    }
    .activemobile
    {
        display:block !important;
    }
    ul#menu li
    {
        float:left;
    }
    ul#menu a
    {
        width:90px;
        padding:50px 0 5px;
        display:block;
        margin: 0 0 0 2px;
    }
    ul#menu ul
    {
        display:none;
        position:absolute;
        margin-left:2px;
        right:0;
    }
    ul#menu li:hover ul
    {
        display:block;
        z-index:999;
    }
    ul#menu ul li
    {
        float:left;
    }
    ul#menu ul li a
    {
        width:80px;
        padding:5px;
        font-size:12px;
        margin:2px 0 0 2px;
    }
    ...
}

機能していなかったコード:

ww = document.body.clientWidth;// i take this on window resize and on load
var adjustMenu = function() {
    if (ww < 768) {
        if (!$("#nav").hasClass("active")) {
            $("#nav").hide();
        } else {
            $("#nav").show();
        }
    ...

動作しているコード (modernizr を使用) 

var adjustMenu = function() {
    if (Modernizr.mq('(max-width: 768px)')) {
        if ($("#nav").hasClass("active"))
            $("#nav").show();
        else
            $("#nav").hide();
...

メディアクエリが機能しない約 20 ～ 30 ピクセルのギャップがあった理由を誰か教えてもらえますか?

4

1 に答える 1

2

.clientWidth要素の内側の幅を返します。つまり、境界線、マージン、または垂直スクロールバーの幅は含まれません

https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

メディア クエリの [min|max]-width メディア機能は、レンダリング サーフェスまたはウィンドウの幅を返します

https://developer.mozilla.org/en/docs/CSS/Media_queries#width

そこが違いです。

window.innerWidth代わりに使用できます。スクロールバーの幅が含まれます。

https://developer.mozilla.org/en-US/docs/DOM/window.innerWidth

すべてのブラウザーの癖を処理する非常に徹底的なソリューションについては、https://github.com/tysonmatanich/viewportSizeを参照してください。

于 2013-04-10T00:55:11.153 に答える