0

ブレークポイントのあるメディアクエリを使用するレスポンシブグリッドシステムを備えたサイトがあります。IE8では、画面サイズが標準のデスクトップサイズ（幅960ピクセル以上）に設定されていても、「モバイルバージョン」がデフォルトのビューとして表示されています。

これを引き起こす既知の問題（および修正）はありますか？

いつものように、助けてくれてありがとう。

- - 編集 - -

メディアクエリの設定方法：

@media screen and (max-width: 767px) {  }
4

2 に答える 2

1

IE8はメディアクエリをサポートしていないため、おそらく全幅の画面ではサポートされていない場合でも、すべてのCSSルールを処理しています。

この問題を防ぐには、各ルールのonly後にキーワードを追加します（ ）。@media@media only screen ...

次に、すべてのページのセクションで素晴らしいプラグインrespond.jsを含むサポートに到達できます<head>

于 2012-09-28T14:41:53.183 に答える
0

それはあなたがあなたのコードをどのように構築したかに依存します（そしてあなたが何も投稿しないので何が悪いのか見分けるのは難しいです;））。ただし、考えられる問題は、最初にモバイルレイアウトを定義し、IE8で960を超えるメディアクエリが実行されないことです。このような：

 body { // Default width for all browsers
   width: 300px; 
 }

 @media only screen and (min-width : 960px) { // Only for supporting desktops
   body {
     width: 960px;
   }
 }

（それらをサポートしていないブラウザには、常に「デフォルト」のcss（メディアクエリなし）を使用してください。）

対処する1つの方法は、デフォルトとして960px幅のレイアウトを使用することです。

 body { // Default width for all browsers
   width: 960px; 
 }

 @media only screen and (min-width : 1400px) { // Widescreen monitors
   body {
     width: 1400px;
   }
 }

 @media only screen and (max-width : 300px) { // Mobile layout
   body {
     width: 300px;
   }
 }

もちろん、本体だけでなくそれ以上を指定する必要がありますが、これでアイデアが得られるはずです。これで問題が解決しない場合は、ここにCSSを投稿して、確認できるようにしてください。

于 2012-09-29T10:28:34.717 に答える