webデザインのフォントサイズについて

質問

こんにちは、現在WEBサイトを作っています。
macとwinでフォントの種類やサイズなどの表示が変わるのは分かっていたのですが、同じmacでも画面が大きいデスクトップと画面が小さいノートパソコンで文字サイズが全く違うので、困っています。同じサイズで表示させるにはどうしたらいいでしょうか。
（現時点ではレスポンシブデザインはしていません。これから別にスマホ用のサイトを作る予定です。）
ちなみに、フォントサイズは、ピクセルで指示しています。
分かる方いらっしゃったら、どうぞ宜しくお願いします。

回答No.5

hostinger-japan

他の方が指摘しているように、ホームページ自体の仕組み（要するに裏で動いでいるHTMLやCSSの仕様として）自体で、全てのデバイスで（見た目上の）文字の大きさが同じになることは想定されていません。ただ、大きさが全く違うとなると、デバイスの解像度でなく、他の原因があるような気もします。（異なるブラウザーを使っている、ブラウザーのバージョンが違う、ブラウザー自体の設定が違うなど）

よって正しいデザイン方法としては、文字の大きさがある程度変わってもデザインやレイアウト自体に悪影響を及ぼさなない形にすることです。その為にはdivなどの構成要素の大きさをpxなどで固定してしまうのではなく、autoや%などを使って内容がうまく表示されるようにしたり、レイアウト上最低限や最大限の大きさが必要な部分はmax-widthやmin-widthなどを使う方法があります。

回答No.4

chieffish

判りやすく書くと、パソコンでは解像度が大きい画面で表示すると
表示範囲が拡がる。テレビでは表示範囲は同じで文字や画像が大きくなる。
Webページはこのテレビ方式みたいなもの。

回答No.3

toast5

異なる環境で同じサイズで表示させるのは不可能だし、大きな画面と小さな画面で同じ文字サイズで表示したら、今度は１行の文字数とかが大幅に変わって来たりとか、つまり「同じ文字サイズで表示するのが果たしていいことかどうか」という問題もあります。だって大きな画面と小さな画面で文字サイズも画像サイズもすべて同じだったら見にくくてかなわんでしょう。だから、まずは「どんな環境でも同じサイズで表示させるのがベスト」という思い込みを、根本から捨てることです。

回答No.2

Kaneyan-R

＞画面が大きいデスクトップと画面が小さいノートパソコンで文字サイズが全く違うので、困っています。

画面が大きい32インチのテレビと画面が小さい21インチのテレビで写ってる人の身長が違うので、困っています。
さて、質問者さんならどう答えますか？

ノートパソコンにデスクトップと全く同じディスプレイを繋ぎ、全く同じ解像度に設定すれば、全く同じ大きさになります。

回答No.1

t_ohta

モニターが異なれば1ピクセルの大きさが違います。
全ての環境で完全に同じにすることは不可能です。