3

HTMLとCSSの開発は初めてです。PC の Web ブラウザーで正常に表示される html を作成しました。

しかし、Android携帯のブラウザで見ると、携帯の画面が小さすぎて、ピントを合わせたい部分を探すのに何度もスライドしなければなりません。

私のウェブページは中央にインデックス テーブルしかなく、本文の左右はすべて空白です。ブラウザを検出してモバイルデバイスからのものかどうかを確認し、ページの本文のサイズを変更する方法があるかどうかを考えていましたか?

どんなアドバイスでも大歓迎です。前もって感謝します。

4

2 に答える 2

12

次のいずれかです。

  1. このようなレスポンシブ Web サイト コードを見て学ぶ必要があります。

  2. <meta content='width=device-width, initial-scale=1' name='viewport'/>小さい画面で水平スクロールバーが必要ない場合は、開始 head タグの後にこのコードを追加してみてください。

于 2013-09-13T02:23:59.460 に答える
3

現在最も一般的な方法は、CSS メディア クエリを使用することです。メディア クエリ内のコードは、指定されたパラメーターにのみ適用されます。これは通常、ブラウザーの高さと幅に適用されますが、印刷されたスタイルシート、ディスプレイの解像度、およびその他のいくつかのものにも適用できます。

これは、スマートフォンの一般的なサイズである 320px から 480px のブラウザー幅を対象とする例です。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body {
    background: #999;
    width: 100%;
  }
}

ここでさらに例を見つけることができます: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2013-09-13T02:12:56.187 に答える