html - htmlはすべてのデバイスで同じ文字サイズを維持します

Question

いくつかの入力ボタンを使って html に関する演習を行います:
http://bullmalay.appspot.com/
携帯でアクセスします。しかし、文字サイズが非常に小さいことがわかりました。その理由は解像度にあると思います。
テキストサイズについて誰か助けてくれませんか？ラップトップで同様のサイズを表示できるようにしたい。

ps。
css:@media (最小幅: 702px) について検索し、フォント サイズを設定しました。しかし、小さなデバイスでも、ラップトップよりも高い解像度を持つことができると思います。サイズは、ラップトップの画面に表示されるよりも小さくなります。
サイズは次のようにする必要があると思います: fontSize * (ラップトップのピクセルあたりの幅)/(そのデバイスのピクセルあたりの幅)。しかし、私はcssに精通していません。

Answer 1

皆さん、ありがとうございました。私は多くのことを学びました。しかし、私は自分で理由を見つけます。
モバイル デバイスのブラウザは、モバイル画面に合わせてページを自動スケーリングします。この行をhtmlに追加するだけで機能します：

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

Answer 2

のようなものを使用できます@media handheld and (max-width: 500px)。残念ながら、CSS のような使い方はないと思います。

fontSize * (ラップトップのピクセルあたりの幅)/(そのデバイスのピクセルあたりの幅)

Answer 3

これまでのところ、私たちが知っている方法は1つだけです。このようなことをする必要があります

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

フォント サイズを pt 単位(1pt = 1/72 inch)で設定することをお勧めします。これは、解像度に依存せず、どの解像度でも同じ見かけのサイズに見えるように設計されています。

Answer 4

以下のコードを追加してみてください

body{
    -webkit-text-size-adjust: none;
}