web制作 スマホでfont-sizeが崩れる

質問

web制作初心者です。
昨夜同じ質問をしたのですが、具体例などを入れて改めて質問します…！

この度、やっとホームページを開設することができました。
と思って喜んでいたのですが、スマートフォン（iPhone4）で見てみるとmacやwinでは見られなかったフォントサイズの崩れが起きています。

font関係はcssで指定していて、
font-familyは以下のように、

body {
font-family : osaka, 'arial', 'Meiryo UI', 'ＭＳ Ｐゴシック', 'MS PGothic','ＭＳ ゴシック','MS Gothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Helvetica', 'Arial','Courier', sans-serif ;
}

font-sizeは以下のように

.text8 {
font-size:0.7em;
line-height:2.3;
letter-spacing:normal;
　　　}

書いています。

全てが違うわけではなく、指定が効いている所と大きくなってしまっている所が混在していて、法則などはなさそうです。

例えば、

<dl class="news">
<dt><span>2011. 11. 01</span></dt>
<dd><div>ホームページを開設しました<br></div></dd>
</dl>

というソースでは「ホームページを開設しました」部分が大きくなってしまいます。

スマートフォンの設定を大きく変えているわけではないので、webの作り方に問題があると思うのですが、
PCでの見え方とスマートフォンも見え方を同じにするためになにかアドバイスがあれば、教えていただきたいです。

どうぞ、よろしくお願いします！

回答No.1

ORUKA1951 · ベストアンサー

スマートフォンは、CSS2.1対応ですから、CSS2.1の書き方で統一したほうが良いでしょう。
.text8{}ではなく
*.text8{}
　font-sizeは継承されるプロパティですから、その下位にあるすべての要素に継承されますが、注意点はfont-sizeを、数値で指定すると、継承されるのはその数値であって、算出値ではないことです。

<dl class="news">
<dt>2011. 11. 01</dt>
<dd>ホームページを開設しました</dd>
</dl>
　余計なspanやdiv、さらには<br>なんて入れないように・・特にbrは一つの段落内での強制改行で通常のHTMLでは登場する機会はありません。段落を開けたい場合はスタイルシートで指定しましょう。
div.news dt{font-weight:bold;}
div.news{padding-bottom:1ex;}

「ホームページを開設しました」部分が大きくなってしまいます。」
どこかで、div要素かdd要素に対してfont-sizeを指定していませんか？

　firefox+firebugで、該当する要素にどのスタイルが継承されているかチェックしてください。示された情報では一般的な回答しか出来ません。

お礼

ありがとうございます。

cssのバージョンなど、基本的な知識や情報がまだまだ追いついていないようなので、勉強し直します。
公開したものをよりブラッシュアップしていく必要がありそうなことが分かり、大変参考になりました。
さっそく、ご教示いただいた事を反映してみようと思います！

本当に、ありがとうございました！