web-dev-qa-db-ja.com

スマートフォンでのフォントサイズの不整合

スマートフォンで見栄えがするようにウェブページを調整しています。このページのフォントサイズを指定できるように、CSSファイルで@mediaセクションを宣言しました。メディアセクションは次のとおりです。

@media screen and (max-device-width: 640px) {
    #TermsOfUse {
        padding: 0 2em 0 2em;
        margin-left: auto;
        margin-right: auto;
        color: #777;
        font: small sans-serif;
    }

    #TermsOfUse p {
        color: #777;
        font-weight: bold;
        font: small sans-serif;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #TermsOfUse #trademark_footer p {
        font: xx-large sans-serif;
    }
}

ただし、フォントサイズが一貫して表示されません。 「小さい」フォントを表示するように指示しましたが、1つのセクションでフォントをずっと小さいサイズで表示し続けています（下部のid = "trademark_footer"）。 "xx-large"を使用しても、ページの残りの部分の "small"フォントほど大きくはなりません。 Chrome）でページを表示しています。

また、次のシミュレーターでこのページを表示すると、ページ全体のすべてのフォントが小さく、読むには小さすぎます。

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

まず、ページの下部にある商標のフォントが、ページの他の部分のフォント（AndroidのChrome）に比べて非常に小さいのはなぜですか。

次に、iPhoneシミュレーターですべてのフォントが非常に小さく表示されるのはなぜですか？

私が達成しようとしているのは、すべてのスマートフォンですべてのフォントを読みやすいサイズで表示することです。

UPDATE：

フォントサイズを明示的に指定すると、同じ問題が発生します。たとえば、プライマリフォントに13pxを指定した場合、同様のサイズで表示されるように、商標に30px前後を指定する必要があります。

「em」を使用しても同じです。

UPDATE：

Samsung Galaxy S2のデフォルトの（私はそう思います）ブラウザーでテストしたところ、小さなフォントも表示され、非常に小さいため判読できません。ちなみに、デフォルトのアドロイドブラウザではダブルタップでナイスサイズに拡大できます。

これを試しても違いはないようです：

body {
    -webkit-text-size-adjust: none;
}
cssmedia-queriesfont-sizesmartphone
23
birdus

そのページのソースを確認したところ、表示されませんでした

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

IPhoneを確認したところ、ページがまったく拡大縮小されていないようで、デバイスがページのサイズを解釈しているため、メディアクエリが有効にならないことがわかりました。

ビューポートメタタグを追加すると、メディアクエリと、探しているフォントの変更がトリガーされます。

ビューポートタグの情報

55
Duncan Beattie

これはロングショットですが、少し役立つかもしれません。

私はiPhone4（iOS 5.0.1）でhttp://inrix.com/traffic/Privacyを開きましたが、フォントは本当に小さいです。

これを見てください ページ の@medias（また、 HTML5ボイラープレートのテンプレート）を見ることができます 問題について、そこから何かを掘り下げることができるかもしれません）。フォントサイズの問題はなく、テストしました前のリンク Chrome（バージョン26.0.1410.64 m）、iOS 5.0.1（9A405 ）とAndroid 2.3.6（電話で）両方の向きで。これらの@mediasから何かを掘り出すことができるかもしれません。

Vectorの答えYou should specify sizes when you want consistencyについてこれ以上同意することはできません。一貫性を保つには名前を避ける必要があります。

最後に、詳細についてのリンクをいくつか示します。

最後に、代替オプションとして、cssに font をダウンロードして埋め込むことができます。

@font-face { 
    font-family: 'LiberationMonoRegular';
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'),
         url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; }

次に、リセット時にフォントを使用します。

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }

それが役に立てば幸い！

1
Esteban

行の高さを設定するのはどうですか？

フォントの位置が異なるさまざまなWebブラウザーで同じ問題が発生しました。 heightとline-heightを設定することでこれを解決できます。

0
bonny