サイトをスマートフォンに対応。やったことのメモ

Check

スポンサードリンク

やるやる詐欺になりかけていた、当サイトのスマートフォン対応ですが、未完成部分もあるものの、パッと見でなんとなくそれなりになりました。スマートフォンで当サイトにアクセスすると、専用のページが表示されます。

やったことを備忘録として残しておきます。

HTMLを書く

スマホ、というかスマホに搭載されているmobilesafariは、HTML5を理解してくれるので、HTML5で書きました。PC用ウェブサイトに比べて簡単に書け、さらにサイドバーの回り込みなどを考慮したコーディングをしなくていいのがGood。

それから、変な横のシークバーが出ないように、以下のコードをhead内に書いておくとよいｋと。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum -scale=1, user-scalable=0">

CSSを書く

スマートフォン用サイトには、CSS3が使えます。ので、PC用サイトよりリッチなサイトが作れます。まあまだまだ未完成なので、色とかはつけていませんが、おいおいやろうかと。

なお、submitボタンなんかは、CSSで幅や高さを指定して、大きめに作ったほうがタップしやすいです。

スマートフォンの振り分け方

いろいろあるようで、ざっくり調べたところだと、

PHPなどのサーバーサイド言語で振り分け
Javascriptによる振り分け
.htaccessによる振り分け
min-device-widthを使ったCSSのみの振り分け

とあるようです。以下は参考サイト。

僕が選んだのは.htaccessによる振り分けです。

.htaccessの設定

やってみたら設定に1時間ほど迷いました。出来上がったのは以下のような感じ。

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !^s/(.*)$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry)
RewriteRule ^s/(.*)$ - [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry)
RewriteRule ^(.*)\.(html|php)$ s/$1.$2 [L]

URLを変更しないような処理にしました。これのメリットは、リンクを張られたときに、リンクが分散しないということが挙げられます。Googleさんにどういった扱いを受けるかは不明。

なお、他の設定としては、スマホ専用ページのURLにリダイレクトさせる方法があります。

編集後記

まだHTMLがトップと個別ページで揃えていないので、それをちょこちょこいじって、後はタグページとコメントをどうするかですなぁ。