Webサイトをスマホ対応にする

空白を設けたことでスマホなどでの可読性が微妙に下がったので、スマホなどの場合は空白を設けないように設定します。

メディアクエリを利用して判定

ページを開いている端末がPCなのかスマートフォンなのかを判別するためにCSSのメディアクエリを利用します。

一般的にはこの解像度以下の場合はこっちのCSSを利用する的なことをするのですが、今回は縦横比によって判定しようと思います。

縦横比での判定

今回は横幅よりも縦幅のほうが大きい場合に空白を設けないようにしようと思います。

orientationはスマートフォンの向きを判定することによく使われますが、これは単純に縦横どちらが長いかを判定しているだけです。

@media (orientation: landscape){
	body{
		width: 75%;
	}
}

@media (orientation: portrait){
	body{
		width: 100%;
	}
}

landscapeが横長の場合、portraitが縦長の場合に利用されます。

これで多少スマートフォンでも見やすくなった気がします。