スマホ用ページ作成 覚書その1
MTに限定した話ではないですが、覚書ということで。
近年、スマホの爆発的な売れ行きは、はたから見ててもすごいですよね。
って、はたからのん気に驚いていたけど、そんな悠長なこと言ってられなくなったのは、会社でもスマホ対応することになり、担当になってしまった～。。
スマホでGoogle検索などすると、スマホページとPCページとふたつあっても、今はPCページの方が上がってくる場合が多いのではないでしょうか。
そのうち、スマホが追い抜くのか。
それとも、検索エンジンが何らかの対応するのか。
そりゃ後者は必須よね。PCでスマホページが表示されたら、ビックリしますよ。素人さんは。
画像とか、％表示なので。
ま、それはそのうちという話で。
振り分けの、スマートなJavaScriptを見つけたので、手始めと言う事でご紹介しましょう。
<script type="text/javascript">
if (( navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) {
if(confirm('スマートフォン用サイトがあります。表示しますか？')) {
location.href = 'スマホサイトのアドレス';
}
}
</script>
上記を<head></head>内に記述します。
PCで表示すると無視して通常に表示しますが、スマホで表示すると、ダイアログが出ます。
「スマートフォン用サイトがあります。表示しますか？」
はいを選ぶとスマホページ、いいえを選ぶとPCページを表示します。
とても、シンプルでスマートですね。
しかし。
結局PCとスマホとふたつファイルを用意しなくちゃいけないのは変わりません。
修正等、結構大変だったりしますよねん。
次回予告
レスポンシブWEBデザインに挑戦。
1つのファイルで、PC・スマホ、CSSで表示を変える方法です。
お楽しみに。
January 8, 2013 12:27 PM
｜
カテゴリー：
スマホの時代
|
|
コメント(0)
|
トラックバック(0)
|
