5分でできるブログのスマートフォン対応 【iPhone,Android,Webサイト】

5分でできるスマートフォン対応

・viewportの指定
・フォントサイズの変更

この２つをうまく指定するだけで、PCサイトがそのままスマートフォンでもそれなりに使えるサイトになると個人的には思いました。

viewportの指定

<meta content="width=990" name="viewport" />

ブログ（Webサイト）の横幅を指定します。そうすると、スマートフォン側でその横幅がすべて入るように縮小されてサイトが表示されます。

横幅を広めに指定すると、横の部分に空白（スペース）部分ができます。デザインに合わせてそのあたりは指定してみてください。

フォントサイズの変更

font-size:14pt;

CSSでフォントサイズを変更してみてください。

iPhone4以降の3.5インチ液晶「960×640px(326ppi)」の縦向きで、サイトの横幅が990px程度でフォントサイズが14ptぐらいだと、PCサイトのままで普通に読める感じです。

対応後の感じ

アドセンスも、PCとモバイルと共通化されましたので、PCサイトのアドセンスであってもテキスト広告の場合？はこのようにモバイル向けの広告が配信されています。