私的にもビジネスにもWEBサイトを作成しているこの頃。

たとえば遠隔地へ納品したソフトの実行ログ等はローカルPCへ保存しているのですが、必要があれば契約しているレンサバへも同時にアップしています。アップしたログを PHP プログラムで整形し、ブラウザーで確認できる様にしてあるのですが、スマホのブラウザーで閲覧すると問題が発生しました。

これまで通りの HTML だとスマホでアクセスした場合、メチャクチャ小さな文字で表示されたのです。ピンチアウトして拡大するという方法が無いわけでもないのですが、横にスクロールできてしまうので激しくイマイチ。

このログは発注元の取引先へもチェックしてもらっているので、是が非でもスマホ対応の方法を覚えなきゃいけないのであります。

主にフォントサイズの変更になるので、CSSへの記述でどうにかなるはず。調べてみると案外簡単に対応出来る事が分かったので、速攻で修正しましたよ。

左が通常の HTML で、右がスマホへの対応後です。

1
2
3
4
5
6
7
8
9
10
11
12
13

@charset "UTF-8";
 
/* 全体の設定 */
body{
	font-size: 1em;
}
 
/* スマホ対応用 */
@media only screen and (max-device-width: 480px){
	body{
		font-size: 2.5em;
	}
}

分かりやすい様に css を端折っていますが、要は画面解像度を判定して処理をすると言うことですね。どうやらスマホは幅 480px 以下として判定すれば大丈夫な様です。

　@media only screen and (max-device-width: 480px)

このような記述を書いてスクリーンサイズで判断し、body へ設定したフォントサイズを上書きしてしまえばいいみたい。他にもスマホのみに必要な設定があればここに連ねてしまえばいいわけです。

思っていたよりも簡単に対応出来る事が分かったのは収穫でしたね。