3

次のようなページhttp://test.lovecpokladu.cz/detail-mince?id=2461でメディア クエリを使用します。

@media all and (min-width: 660px) {
    ... styles for box decoration ...
}

このメタ ビューポート タグを使用します。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Chrome のウィンドウのサイズを 660px に変更すると (ウィンドウの境界線ではなく HTML ページのみを測定)、スタイルが正しく適用されます。スタイルは 659px では適用されません。これは正しいです。

問題は Opera、IE、Firefox にあります。幅が約 642px になるとすぐにスタイルが適用されます :( 私は、これらのブラウザーが、最大幅の状態であっても、別の Web サイト (私が作成したもの) であっても、より多くのコンテンツで最小幅をより早く起動することを観察します。

どこに問題があるのでしょうか?

どうもありがとう！

4

2 に答える 2

6

BODY または HTML のスクロールバーの幅の問題 - 約 16 ～ 18px。

何をすべきか？

  1. 悪い解決策 - BODY または HTML に設定しますoverflow-y: scroll。
  2. 実験的な解決策 - スクロールバーを BODY または HTML から最初のラッパー DIV に移動してみてください。

そのようです：

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
于 2012-04-10T15:23:53.213 に答える
1

私はちょうど同じ問題を抱えていて、少なくとも私にとっては解決策を見つけました。あまりテストしていないので、考慮していないことがあれば教えてください。

メディア クエリでは、本文の最小幅をメディア クエリの最小幅に設定しました。できます！

@media only screen
and (min-width : 1060px) {
    body{
        min-width: 1060px;
    }
    #main-content{
        text-align: right;
        padding-left: 0;
    }
}

ここで、この問題と解決策の例を作成しました。

http://gehirnstroem.at/media-query.htm

http://gehirnstroem.at/media-query-solved.htm

于 2012-05-04T15:25:46.303 に答える