0

Nexus 5 で私のウェブサイトが奇妙に見えます (下の画像を参照)。私はテストできませんが、これは他の携帯電話でも同じだと思います。これは @media クエリが原因だと思います。ただし、画面幅の異なる通常のPCでこれを試してみると、そうなるはずです。

2 つの質問:

  • どうすればこれを修正できますか?
  • この動作を自分の PC でテストして、firebug を使用して CSS を確認する方法はありますか?

これは、@media クエリが私の css ファイルでどのように見えるかです:

@media (min-width: 600px) {
  .col-lg-3 {
    width: 50%;
    float: left;
  }
}

@media (min-width: 900px) {
  .col-lg-3 {
    width: 33.33%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .col-lg-3 {
    width: 25%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .container {
    max-width: 980px;
  }
}

.container は影付きの白いボックスで、.col-lg-3 は製品ボックスです (通常の画面では 4 つ並んでいます)。.container は、小さな画面では画面いっぱいに、大きな画面では幅 980px にする必要があります。ただし、はるかに小さく見え、.col-lg-3 の幅が 100% のように見えます

ここに画像の説明を入力

4

2 に答える 2

2

@zazvomiki を詳しく説明するには、ビューポート メタ タグを実装し、ビューポートの幅が画面の幅と等しくなるように指定することで、この動作を修正できます。Web ページの要素に以下を配置します。

<meta name="viewport" content="width=device-width, user-scalable=no">

質問の 2 番目の部分に答えるために、PC でこの動作をテストできますか。Chrome for Android でリモート デバッグを使用できます。これにより、PC から開発者ツールを使用して携帯電話のページを調査できます。次に、Chrome で通常行うようにライブ変更を加えて、さまざまなアイデアをテストできます。

Chrome のリモート デバッグ: https://developer.chrome.com/devtools/docs/remote-debugging

于 2014-09-17T20:57:27.007 に答える
2

Chrome には、モバイル用の非常に優れたエミュレーション ツールが開発者ツールに組み込まれています。https://developer.chrome.com/devtools/docs/device-modeを参照してください

サブメニュー UL にも幅が定義されているため、メニュー バーがコンテナよりも広くなる可能性があります。メニューテキストの空白も確認してください。

于 2014-09-17T20:51:51.070 に答える