html - モバイルで適切に表示されるようにウェブサイトを最適化する方法

Question

これは私のデスクトップブラウザのスクリーンショットです

ここに画像の説明を入力

デスクトップブラウザではすべてが大きく見えます。しかし、モバイルブラウザで表示すると、レイアウトが非常に小さくなります。このウェブサイトは基本的に単純な html/css だけを使用していたため、html/css コードに何かが欠けていました。

誰でも私を指摘できますか？ありがとう

score 2 · Accepted Answer

内に次のビューポートメタタグを必ず設定してください<head>。そうしないと、テキストが小さすぎます。

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

score 1 · Accepted Answer

ブラウザウィンドウが@mediaクエリで特定のサイズを下回ったときに、要素のサイズを変更します。

@media screen and (max-width: 500px) {
  div {
    width: 400px;
  }
}

score 0 · Accepted Answer

実際、Web サイトのモバイルビューの最適化は詳細で広範なトピックですが、あなたの場合は、フォントを少し増やすことをお勧めします。

3 に答える 3