レスポンシブWebデザインで最適なフォントサイズって？

iPhoneでうちのサイトを横向き画面にしたら文字のサイズがでかくなってちょっと、って感じだったので、ググってCSSを変更しましたです。

一番確実な方法は、-webkit-text-size-adjust: 100%; だそうですね。

body{
-webkit-text-size-adjust: 100%;
}

うちのサイトでは実際にこんな感じに変更しました。

body {
	margin: 0;padding: 0;text-align: center;background-color: #eee;color:#333;font-family: Meiryo,Verdana, Geneva, Tahoma, sans-serif;font-size: 1em;
	-webkit-text-size-adjust: 100%;
}

もともとは、メディアクエリでスマホっぽいところで指定していたんですが、それが効かなかったというオチですわ。

@media(max-width:639px){
body{
	-webkit-text-size-adjust: 100%;
} 

メディアクエリ内ではなく、本チャンで書かないと。

ついでに、モバイルフレンドリーにするために指定すべき最適なフォントサイズはどないやねん？って調べてみたら。。。

ほよ、16ピクセルなんですか？？

私は今まで14ピクセルにしてたんですが、16ピクセルがよさそうです。読み物系は16ピクセル、画像が中心だったら14ピクセルでもいいとかそういうノリですか？？

まあ、スマホの解像度のみ16ピクセルにすればええやん、って言われそうですけど、どうなんでしょう？

メディアクエリで調整できますけど。。。

 639ピクセルまでの解像度では16ピクセルにしちゃいます？？？

@media(max-width:639px){
body{
	font-size:16px;
}

で、ディスプレイ画面では14ピクセルで？？

@media only screen{
img {max-width: 100%;height: auto;}
.wrapper{
	font-size:14px
}
}

CSSファイルいぢるだけでOKなんですけど、さてどうしますか？

でもでも、基本のbodyタブのCSSプロパティでフォントサイズを1emにしてるから、あとはブラウザーの大きさに任せるという手も（逃

と思っても、CSSの優先順位絡みなのかわかんないですが反映されないとです。。。

16ピクセルじゃなくて間をとって15ピクセルにしちゃうとか（ぇ

ついでに、このはてなブログのデスクトップのエントリーパーツのフォントサイズを15ピクセルにしました。

.entry-content{
font-size:15px
}