web-dev-qa-db-ja.com

すべてのモバイルデバイスで適切なフォントサイズを取得する

私のモバイルアプリでは、たとえば次のような大きなフォントを使用しています。

<b style="font-size:100px; font-family:Segoe UI">text</b>

携帯電話でテストすると見た目はきれいですが、小さい携帯電話でも同じサイズで大きすぎます。

すべての電話で同じサイズを取得するには、どのCSS設定を使用する必要がありますか？

cssfont-size
16
brent

さまざまなデバイス幅に対してメディアクエリを使用する必要があります。

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

等々...

11
drip

メディアクエリは機能しません。はい、画面サイズに基づいてさまざまなフォントサイズを使用できます（物理サイズではなくピクセルサイズです。したがって、物理サイズが同じ画面でピクセル密度が異なる2つのデバイスでは同じサイズではありません）。 あなたの目標は、ピクセル密度に関係なく、同じ物理画面サイズを持つすべてのデバイスで同じ物理サイズのテキストを持つことです。

最近の携帯電話はPalmサイズの画面でUltra HD解像度に適合していますが、古い携帯電話のピクセル密度はずっと低くなっています。

最近までこの問題の解決策はありませんでした。最近、CSS3は「ビューポートサイズ化タイポグラフィ」と呼ばれるもののサポートを追加しました。これにより、物理的な画面サイズに対して物のサイズを設定できます。 here と説明されています。

19
Caner

デバイス間で同じ/類似したサイズのテキストを使用することが望ましいため、デフォルトでは取得されません。これは、デバイスが小さいために物理ピクセルが少ないか小さいためではありませんが、主に大きなデスクトップ画面用に設計されたページを壊さないためにそれらのデバイスで発生するスケーリングによるものです。

たとえば、iPhone 5には1136x640の物理ピクセルがありますが、Chromeの開発者向けツールのデバイスツールバーを使用すると、一部の要素がそれよりもはるかに大きいように見えることがあります（1300x900など）。これは、ブラウザがデフォルトで適用するズームアウトスケーリングのためです。この場合、CSSピクセルサイズは実際のピクセルサイズよりもはるかに小さくなります。スマートフォンでデスクトップサイズのページが表示されることを想像してください。

そうしたくない場合は、（ページヘッダーで）スケーリングを混乱させないようにブラウザに明示的に指示する必要があります。

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

デバイス間で同じ大きさのテキストが表示される場合、そのようなものがあり、スマートフォンで小さく表示するために削除する必要があります。

16
mehmet

使用する @media解像度ごとに異なるフォントをクエリおよび設定する

例

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

メディアクエリでの良好な読み取り

1
Mr. Alien

または、 https://github.com/modularscale/modularscale-sass をご覧ください

すべてのモバイルデバイスに対応するために多数のブレークポイントを設定することはすぐに非常に複雑になる可能性があり、モジュラースケールで非常に良い結果が得られました。

また、EMまたはREMでフォントサイズを設定することは、完全にアクセス可能/柔軟にしたい場合に行く方法です。

0
Capsule