スマホでホームページを表示した時、文章のフォントサイズが小さくなってしまう

テキストサイトを作っています。

-------------------------------------------------
#container1 {
width: 948px;
margin: 0px auto;
min-height: 100%;
overflow: hidden;
padding: 1px;
background: #FFF;
}

div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 100%; 　/* ここでフォントサイズを変える */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
margin-bottom: 300px;
}
-------------------------------------------------

cssにこのように記述して、文章を表示する部分をつくりました。
しかし、今のままではPCで閲覧したときはちょうどよい文字サイズなのですが、スマホだと文字が小さく表示されてしまい、とても読みづらいです。
スマホで表示したときだけ文字を大きく表示するようにしたいのですが、どうしたら良いでしょうか。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/12/05 09:33

スマホは、解像度が高く本来は、1pxが、0.26mmなのですが・・

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm（1/96インチ）に対応する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［構文と基本データ型( https://momdo.github.io/css2/syndata.html#value- … )］より

　スマホの場合は、Viewport という機能があり、本来980pxであってもスマホ縦置きの横幅320px、すなわちほぼ1/3に縮小されてしまいます。

　そのために、パソコンで見るのに比較して1/3の文字になったりします。

　もちろん、最大の原因はWebページの作成で、大きな幅に固定してしまうから起きる現象で、リキッドデザインで、320pxでも縮めなくても表示できるデザインにしてあれば問題ないのです。
#container1 {
width: 948px;
margin: 0px auto;
↓
#container1 {
width: 90%;
min-width:480px;
max-width:1000px;
margin: 0px auto;

・・・これが本来の手法です。これでスマホ縦置きだと 320/480 約 3/5程度で表示される

★#container1 このようなid名やclass名は好ましくありません。
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　・・・２０年近く前から言われ続けているが、理解されにくく、それでHTML5では構造を示す新しい要素が追加された。
　W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP( http://www.html5.jp/trans/w3c_differences.html#n … )
　つけるなら、それを参考に<div class="article">でしょうが、率直に
body{width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
ないし
div.header,div.section,div.footer{
　　{width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
でよい。
★CSS2以降は、起点セレクタを書きます。
　div#container1
　#container1 とかけば、*#container1 と全称セレクタ(詳細度0)が省略されたとみなす

★div.main
　mainは、ごく一部に使う。
　main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/main.html )

これらは、検索エンジンがページの内容を正確に理解するため--SEO検索エンジン最適化のために留意したほうが良い。


　さて、本題の文字サイズですが、基本的にはリキッドで対処できますし、それで対応できない・・たとえば、640ピクセル以下のデバイスだとデザインを変える
<style type="text/css" media="screen and (max-width: 640px)">
でスマホ用のスタイルをかく。

　そして、先のViewportをつかって、HTMLに
<meta name="viewport" content="width=device-width; initial-scale=0.8">
　を書いておく。

1) ページをリキッドで製作する。
　現在のように幅広ディスプレイ、タブレットやスマホのような小さな画面が混在する場合は必須です。
2) mediaqueryをつかって、画面幅でデザインを変更する。
3) Viewportをつかって、縮小されないようにする

　の三点が対策になります。

No.1 回答者： t_fumiaki 回答日時： 2016/12/05 05:47

レスポンシブデザインにする。

詳しくは検索して研鑽して下さい。

例えば以下をcssの最後へ追加して、ブラウザの横幅が480px以下のものにだけ、適用するcssを作る。

@media screen and (max-width: 480px) {
div.main { font-size : 12px ; }
}