Chromeの767pxでブートストラップレイアウトのメディアクエリが動作しない

レイアウトスタイルが適用されていない正確に767pxのBootstrap（v3.3.5）レイアウトCSSにChromeのみの問題があります。Chromeの767pxでブートストラップレイアウトのメディアクエリが動作しない

ここでは、次のようにすべての私のメディアクエリが作成されている3つのブラウザ...

Chrome 
-window.innerWidth of <= 766 - correctly shows mobile layout 
-window.innerWidth of == 767 - incorrectly applies no layout styles 
-window.innerWidth of >= 768 - correctly shows full screen layout 

Firefox 
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout 
-window.innerWidth of >=768 - correctly shows full screen layout 

Safari 
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)

にコンソールを使って実験後の行動は、私はこれらを変更する実験をしました...

@media (max-width: 767px) { 
/*small view*/ 
} 
@media (min-width: 768px) { 
/*full view*/ 
}

です値が重複する（例えば、最小幅は767px）が、効果はありません。

これは少し曖昧ですが、私は実際にどこから問題を調査するか分かりませんし、以前のバージョンのブートストラップ（https://github.com/twbs/bootstrap/issues/1531）と同じような動作のレポートしか見つけられませんでした。

Chromeでのみ表示される可能性がある理由を知っている人はいますか？いずれにしても、適切な調査方法に関するアドバイスは非常に高く評価されます。

- EDIT - 研究の時間後、私はこの単純なファイルをテストした... Chromeで

<html> 
    <head> 
     <style> 
     @media (max-width: 767px) { 
      .headlineText { 
       font-size: 10px; 
       color: red; 
      } 
     } 
     @media (min-width: 768px) { 
      .headlineText { 
       font-size: 10px; 
       color: green; 
      } 
     } 
     </style> 
    </head> 
    <body> 
     <h1 class="headlineText">this is a headline</h1> 
    </body> 
</html>

のみ - 767pxでテキストが緑または赤でもない - それは黒だ、はTimes Newローマ、そして10pxよりかなり大きい。もちろん、私はフィーリング/コードブックにアップロードすることでこれを再現することはできません - それは私がローカルホストで（MAMP経由で）実行しているという事実とは何か関係があります。それがなぜそうなるのかはまったく分かりませんが、少なくとも生きている環境で私に影響を及ぼすものではないようです。

出典

2017-02-11 d3wannabe

このフルスクリーンを作り、ウィンドウのサイズを変更してください。それはクロムの私のために働くと "の間に動作しない"の表示がありません。

.works { 
 
    display: none; 
 
} 
 
.does-not-work { 
 
    display: block; 
 
} 
 
@media(max-width:767px){ 
 
    .works { 
 
    display: block; 
 
    } 
 
    .works::before { 
 
    content: 'max-width: 767px | '; 
 
    } 
 
    .does-not-work { 
 
    display: none; 
 
    } 
 
} 
 
@media(min-width:768px){ 
 
    .works { 
 
    display: block; 
 
    } 
 
    .works::before { 
 
    content: 'min-width: 768px | '; 
 
    } 
 
    .does-not-work { 
 
    display: none; 
 
    } 
 
}

<span class="works">works</span> 
 
<span class="does-not-work">does not work</span>

コメントに基づいてサイドノート：約一年前、私は巨大なウェブサイトと同じ問題がありました。ほぼ2年間の6人のチームの結果。すべての側から注ぐコードのビット。私はフロントエンドを一緒に糊付けして、すべてが機能していることを確認しました。あなたは@mediaクエリが混乱していたと想像することができます。私はモバイルの第1の原則を使用してすべてのクエリをリファクタリングすることによってバグを取り除きました - 私は@mediaをすべてBootstrap's exact orderを使ってグループ化しました。私のためにそれを修正した。今日まで私は何が原因で起こったのか分かりません。前に768pxと992pxに（少し）壊れていた。

出典

2017-02-11 20:39:22

ありがとうAndrei - それは私のためにもうまく動作します。私は問題を推測しているのは、私が投稿したgithubの問題のリンクに似たブートストラップとChromeの組み合わせです。ブートストラップを使わずに問題を再現することはできませんが、長いプロジェクトを単純化することなく、すべてのことをあなたと共有することは困難です。 – d3wannabe

あなたの説明から、それはあなたのCSSファイルの 'typo'です。セミコロンがない、閉じられていない '@ media'クエリかもしれませんが、いくつかの理由が考えられます。あなたができる最良のことは、新しい 'stylesheet'を作成し、既存のCSSのコピーペーストチャンクを作成することです。あなたがエラーを転送し、うまくいけば見つけることができます。または、バリデーターを使用することもできますが、それは毎回機能しません。私は私のコードが持つかもしれない問題を私に警告する私の「IDE」の能力に個人的に頼っています。あなたが尋ねる前に、私は恐竜です：私は 'phpStorm'を使います。 'webStorm'は現代のもので、同じ会社です。 –

ありがとうAndrei - 私は最大幅：768pxと最小幅：768pxを持つように私の設定を変更する場合、私はそれをもう一度試してみる必要があると思います - 問題はChromeで消えますが、 SafariとFirefoxのスタイルがブレークポイントに適用されていないのと同じこと - かなりイライラしていますが、私はすべてのCSSを使って質の高い時間を過ごさなければならないと思います。 – d3wannabe

Chromeの767pxでブートストラップレイアウトのメディアクエリが動作しない

答えて

関連する問題