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

Check

スポンサードリンク

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

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

HTMLを書く

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

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

<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がトップと個別ページで揃えていないので、それをちょこちょこいじって、後はタグページとコメントをどうするかですなぁ。

【PR】

Check

スポンサードリンク

posted by たむ/ 2012年1月16日 14:08/edit

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

タグ
CSS(5) , HTML(5) , iPhone(4) , javascript(4) , スマートフォン(3)
このページのURL
TrackBack

コメントを投稿

送信(コメントが投稿されるまで時間がかかる場合があります。)

ピックアップ!

買い物の足しにでも
楽天モニター登録で50ポイント

カテゴリー

最新記事

サイト内検索

リンクについて

当サイトはリンクフリーです。ご自由にリンクしていただいてかまいません。

過去ログ

運営サイト

ブログパーツ

あわせて読みたいブログパーツ

なかのひと *

  • track feed
ブログ広告ならブログ広告.com

ブログタイムズ

**