スマートフォンで見やすいように Web ページを微調整しています。このページのフォント サイズを指定できるように、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」を使用しても、ページの残りの部分の「小さい」フォントほど大きくはなりません。Android の Chrome でページを表示しています。
また、このページを次のシミュレーターで表示すると、ページ全体のすべてのフォントが小さすぎて読めません。
まず、ページの下部にある商標のフォントが、ページの残りの部分 (Android の Chrome) のフォントよりもずっと小さく表示されるのはなぜですか?
次に、iPhone シミュレーターですべてのフォントが非常に小さく表示されるのはなぜですか?
私が達成しようとしているのは、すべてのスマートフォンですべてのフォントを読みやすいサイズで表示することだけです。
アップデート：
フォント サイズを明示的に指定すると、同じ問題が発生します。たとえば、プライマリ フォントに 13px を指定した場合、同様のサイズで表示するには、商標に約 30px を指定する必要があります。
「em」を使用しても同じです。
アップデート：
Samsung Galaxy S2 のデフォルト (と思う) ブラウザでテストしたところ、小さなフォントも表示されます。小さすぎて判読できません。ちなみに、デフォルトの Android ブラウザでは、ダブルタップすると、いいサイズに拡大されます。
これを試してみましたが、違いはないようです：
body {
-webkit-text-size-adjust: none;
}