0

私が取り組んでいるレスポンシブ デザインには、別の問題がありました。シンプルにするために、画面サイズまたはデバイス サイズが 750px 未満の場合、body を 480px にスナップするように設定しました。次に、理想的には、どのデバイスの画面も幅に合わせて拡大縮小する必要があります。

今日すでにいくつかの助けを借りて、ビューポート メタを追加したので、CSS は私の iPhone と Android の両方に対応し、最小化されたデスクトップ ブラウザにも対応するようになりました。

iPhone は見栄えがします。幅に合わせてズームするので、ウェブページは約 480 ピクセルですが、私の 320 ピクセルの iPhone 画面に完全に収まります。

ただし、Android ではズームインしすぎています。右側の約 25% ～ 30% が画面からはみ出しており、スクロールして確認する必要があります。ピンチしてズームアウトすると、ウィンドウが画面の幅に収まり、見栄えがよくなります。なぜ手動でズームアウトする必要があるのか​​ わかりません。

  • ページの読み込み時に Android がページの幅にズームアウトしないのはなぜですか?

私のメタタグは次のようになります。

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

私のCSSは次のようになります。

@media all and (max-device-width: 750px), all and (max-width: 750px) {
  body {max-width:480px;}
  #container {
    width: 90%;
    margin: 0px auto;
    padding: 0px;
    min-width:480px;
  }
  #rightnav {display:none;}
}
4

1 に答える 1

0

320px の画面に 480px のレイアウトを表示する場合は、明らかにズームする必要があるため、これは指定どおりに機能しますが、iPhone は「賢く」いくつかのルールを無視してフルスクリーンで表示します。値を 0.75 に設定すると、initial-scaleすべてのデバイスが最初にそのズーム レベルを維持するように強制できます。もちろん、より良い解決策は、320px デバイスで画面コンテンツをさらに縮小するための別のメディア クエリを用意することです。

于 2012-12-21T03:17:36.567 に答える