3

主にモバイルデバイス向けに設計されたWeb用のチャットプログラムを作成しています。私の問題は、モバイルデバイスにできるだけ適したものにするためにem、ピクセルフォントサイズを削除したことですが、Firefoxを搭載したデスクトップPCでは、liテキストが非常に小さく表示され、iPadでも表示されます。私のNokiaLumia800 Windows Phoneでは、同じくらい大きく表示されます。

私のCSS：

* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }

ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }

a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }

input[type="text"], input[type="password"]
{
    width:100%; margin:0;
    font-size:2em; border:0;
}

input[type="button"]
{
    width:100%; padding:10px; font-size:2em;
    font-variant:small-caps; letter-spacing:2px;
    border:1px solid #000000; background-color:#dddddd;
}

#messages
{
    width:100%; height:200px;
    border:0; padding:0; margin:0;
    overflow:auto; font-size:0.9em;
}

span.msgTime { font-size:0.7em; }

.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }

ご覧のとおり、list要素は0.8emを使用しています。ブラウザの不整合があることに気づきましたが、これは本当に避けられないのでしょうか。

また、これを使用して、Webページのスケールが正しく表示されることを確認します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

アップデート1

他のすべての相対的なフォントサイズは問題なく見えることを言及する価値があると思います。それは、モバイルブラウザ間で異なるリスト要素のみであるように見えます。

4

4 に答える 4

4

em現在のフォントサイズを基準にした測定値です。ブラウザのデフォルトの基本フォントサイズがすべて異なる場合、外観も異なります。pt代わりに、さまざまなサイズの画面に適していて、固定されていないものを使用してみてくださいpx。

http://www.w3schools.com/cssref/css_units.asp

于 2012-08-24T16:44:47.460 に答える
1

各ブラウザには、ベーステキストサイズを設定する独自のデフォルトスタイルシートがあります。Emsは、デフォルトのテキストサイズに基づいてサイズを変更する相対的な単位です。例として、を与えてみてbody、font-size:16pxテキストが同じサイズで表示されないかどうかを確認してください。

より明確にするために、ここに、body要素にピクセルサイズを使用し、その要素のみを使用することを提案する理由を説明するためのリンクがあります。http://www.alistapart.com/articles/fluidgrids/

于 2012-08-24T16:44:27.133 に答える
0

cssファイルの行で1は表示されません

* { margin:0; padding:0; font-family:arial; }

に置き換えます

* { margin:0; padding:0; font-family:arial; font-size: 1em; }

それが動作します！

于 2013-08-15T14:23:11.373 に答える
-1

各ブラウザにデフォルトのフォントサイズ（おそらくデバイスに適している）を使用させたい場合は、本文のフォントサイズをまったく設定せず、meta現在のようにスケーリングを防ぐためにタグを使用しないでください。

「1つのサイズですべてに対応」があなたのやり方だと思う場合は、emユニットを使用してそれを達成しようとするのではなく、ピクセルまたはポイントでフォントサイズを設定します（さまざまなアプローチ）。

于 2012-08-24T16:52:32.277 に答える