このブログiPhone対応してみた。あちこちに情報あるし今更だしで、書くつもりなかったんだけど、思ったより簡単でちょっと嬉しかったのでメモ。

実はiPhone対応する自体がいいことなのか、っていうのはあったのだけどね。普通にフルブラウザがあって、タップで簡単に拡大もできるし、とか。でも、やっぱり自分がiPhone使って、他のサイトを見るときに、対応しているサイトの方がいいかな、と思うことが多くなってきたので、対応してみた。

CSSだけでできる方法で、メインのhtmlに、

<link href="/css/iphone.css" media="only screen and (max-device-width:480px)" rel="stylesheet" type="text/css" /> 
<meta content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

を、書く。場所は元々のCSSの後にする。で、その /css/iphone.css の中で、元々のCSSを上書きする。

汎用性のないcssだけど、短いので乗せる。

h1 {font-size:1.5em; margin: 5px 5px 5px 5px; letter-spacing:0;}
h2 {font-size:1.0em; margin: 5px 5px 5px 5px; letter-spacing:0;}
#slogan {font-size: 1.0em; margin: 0px 0px 20px 10px; letter-spacing:px}
#wrap {width: 318px; text-align:none; margin: 0;}
#sidebar {float: none; width: 318px; }
#content {width: 318px; text-align:none; float:none;}
img.attach_img {max-width: 300px}
pre {width: 300px; padding: 5px; margin: 5px}

やってることは、タイトル (h1/h2) の文字を小さくして、本文とか画像の最大幅をiPhoneに合わる。後は、サイドバーのfloatをやめて下に持っていくだけ。

クール！なページにしたければそれなりにcssでがんばる必要あるけど、ここぐらいだったらこれで十分。

こんな感じになる。

Tweet

記事の内容についての質問、苦情、間違いの指摘等なんでもtwitterでどうぞ。   Tweet