html,cssでスマホとパソコンで見たときのフォントサイズをそれぞれ変えて表示したい。

自分の日記用にホームページを作っています。
現在スマホで見られるようにフォントサイズを調整したのですが、そのサイズだとパソコンで表示したときはあまりにも大きくなってしまいます。
そこで、スマホで見たときと、パソコンで見たときそれぞれ別々のフォントサイズで表示できるようにしたいのですが、どうすればいいでしょうか。
スマホサイトを作っても良いかなと思ったのですが、もともとのデザインが1カラムのシンプルなもので、パソコンでちょうど良い文字サイズに合わせるとスマホでは見にくい、以外は問題ないので、一からスマホ用のサイトを作るのはすこし手間かなと思っています。

現在は div.mainというclassをつくっており、

div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 27px; 　/* このサイズがiPhoneで見たとき最も見やすい */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
}

このように調整しています。

質問者からの補足コメント

• 

  補足：現在このように記述しています。
  
  
  HTML
  <div id="container1">
  <h2>タイトル</h2>
  <div class="main">
  本文～～～～<br>
  　　本文～～～～<br>
  　</div>
  </div>
  
  
  CSS
  #container1 {
  width: 948px;
  margin: 0px auto;
  min-height: 100%;
  overflow: hidden;
  padding: 1px;
  background: #FFF;
  }
  
  （tableやh2の装飾などのcssが間に入ります）
  
  div.main {
  　margin-left: 8px;
  　line-height: 1.5em;
  　font-size: 27px; 　
  　color: #0b0b0b;
  　font-family: "メイリオ",sans-serif;
  }

    補足日時：2016/07/05 10:42

• ①413px、480px、500pxを試しましたが変化はありませんでした。
  　ただ、回答いただいた記述をいただく前から横幅自体はiPhone側が調整？しているようです。
  　（同じフォントサイズにし、PCとスマホで見ると改行の位置が違ってくるので）
  　@media ...　の部分のフォントサイズを27px以上に変えても変化しませんでした。
  
  ②PCで横幅を狭くしていってもフォントサイズに変化はありませんでした。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/07/05 12:54

• ②について、誤りがありました。width 375px に設定したところ、PC上でそのサイズ以下になったらフォントサイズに変化がありました。
  ただ、iPhoneで見たときには変化はありませんでした。

    補足日時：2016/07/05 13:14

• 再度失礼します。
  
  対象のhtmlに<meta name="viewport" content="width=device-width, initial-scale=1">
  という記述を加えてみたところ、うまくいきました。（No.1さんの記述を加えたうえで）
  しかし、いったい何が起こっているのかよくわかりません。
  引き続き回答を募集します。

    補足日時：2016/07/05 13:29

No.4 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/07/05 15:56

>>ダブルタップで縮小

同じソースをpc/スマホで共用するレスポンシブデザインになってないからです。

少しハードルが高いですが、レスポンシブデザインにするのがベストです。

●スマホのcss
コンテンツの横幅をブラウザの横幅へ合わせないとイケナイのですが、
横幅はpxで無く、全て%で指定する必要があります。
フォントサイズも%かemで指定。padding、marginも%

●pcのcssは現状のまま使う。

この回答へのお礼

ありがとうございます。やってみます。

お礼日時：2016/07/05 16:01

No.3 回答者： t_fumiaki 回答日時： 2016/07/05 14:05

<meta name="viewport" はスマホで必要になる記述です。

記述を無しにするとPCイメージがそのまま縮小された形式で、フォントや画像が小さく強制的に押し込められます。

記述を入れると、スマホの横幅に応じた見え方にして呉れます。

ですので、一番良いのはCSSをPC用、スマホ用に２本立てにして、BODYの横幅やテーブルサイズ等も別々にして、pc/スマホの表示領域の大きさに応じた記述をすることになります。

使うCSSファイルの切り替えもhtml側で行ないます(レスポンスの関係)。

スマホ用cssではbodyの横幅指定を止め("viewport"に依存させる）、containerやtableの横幅は親要素に対する相対%で指定します。
例：width: 100%;　とか　width: 80%;
親が居ない場合はbodyに対する%になります。

詳細は「レスポンシブデザイン」で検索して下さい。

html側でのcssクエリ部分は以下の様になります。
切り替えポイントの幅を調整して下さい。

pc用、タブレット用、スマホ用の３段階切り替えも出来ます。
(切り替えポイントを変えながらmedia=のクエリを3個記述する)

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" media="screen and (min-width: 481px)" href="style-css-pc.css" />

<link rel="stylesheet" media="screen and (max-width: 480px)" href="style-css-smart.css" />

この回答へのお礼

ありがとうございます。
<meta name="viewport" content="width=device-width, initial-scale=1">
を加えると、すでに拡大された状態で表示されてしまいます。
ダブルタップで縮小すると、containerの横幅もちょうどよく、文字サイズもちょうどよい状態で表示されるのですが。。。
これは、viewportの設定が悪いということで良いでしょうか？

お礼日時：2016/07/05 15:00

No.2 回答者： t_fumiaki 回答日時： 2016/07/05 12:16

①max-width: 320px の横幅を調整して見て下さい。

480pxにするとか・・。

②pcでブラウザの横幅を狭くして行くと、横幅のポイントでフォントの大きさが切り替わりますか？

No.1 回答者： t_fumiaki 回答日時： 2016/07/05 09:55

ブラウザの横幅で適応するcssステートメントを替える。

方法は色々あるけど、以下は例。参考に！

div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 16px; 　/* このサイズはPC用 */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
}

@media screen and (max-width: 320px) /*スマホ専用*/
{
div.main {
font-size: 27px; 　/* このサイズがiPhone専用サイズ */
}
}

この回答へのお礼

回答ありがとうございます。
うまくいくかと思ったのですが、携帯で動作しませんでした・・・。
このdiv.mainを#container1というdivの上に置いているのが原因なのでしょうか。

HTML
<div id="container1">
<h2>タイトル</h2>
<div class="main">
本文～～～～<br>
　　本文～～～～<br>
　</div>
</div>


CSS
#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: 27px; 　
　color: #0b0b0b;
　font-family: "メイリオ",sans-serif;
}


これによってまず縦に長い1カラムを作り、その上にdiv.mainを置く形になっています。

（補足では字数が足りませんので、お礼で失礼します。）

お礼日時：2016/07/05 10:40