PCサイトとiPhoneサイトを簡単にCSSの切り替えだけで実装する方法
今日は少し勉強になった事があったのでメモがてらのエントリで。
まず前提として
「PCサイトとiPhoneサイトを同一のファイルでCSSの切り替えだけで実装したい」
というのがあります。
それはなぜっていうと例えばPCサイト（example.com/）とiPhoneサイト（example.com/iphone）みたいに違うファイルでの切り替えをするのは比較的方法がたくさんあるんですけど、めんどくさがりやな僕は1つのHTMLファイルでそれぞれ最適な見方が出来れば楽じゃね？って思うんです。
だって例えばブログの記事書いてそれが違うファイルで出力されるとかになったりすると重複コンテンツなんじゃねとかサーバー負荷高いんじゃねとか色々考えてしまうんですよね。
なので今回はHTMLのようなコンテンツ部分のファイルは1つでそれぞれ環境ごとに違うCSSを当てて表示の切り替えをする方法を探しました。
で、ここで問題になるのが2つ。
1つめは「どういう方法でCSSの切り替えを行うか？」
2つめは「サイズの大きな画像の処理をどうするか？」
の2つ。
1つめは色んな方法がありますが今回は比較的簡単なJSファイルでユーザーエージェントとを判定してそれぞれのCSSを出力させる方法で行きます。
まずはサンプルのソース
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('
');
}else {
document.write('
');
}
簡単に説明するとユーザーエージェントがiPhoneの場合はiphone.cssにしてそれ以外の場合はpc.cssを読み込ませようというわけです。
これで簡単にユーザーエージェントごとにCSSを当てる事が出来ますね。
で、次は参考になったのがこちらの記事「iPhoneの向きによって画像の大きさを自動的に変えるスクリプト」こちらで配布されているJSを使えばブラウザのサイズに合わせて画像の縮小が自動的に行われるという優れもの。
これはいい！んですがこれをそのまま使うとPCサイトでもiPhoneサイトでのサイズである320pxに縮小されちゃうんですよね。
で、これは困ったと思ったんですが先ほどの切り替えをうまく使えばこれも替えれるっていうことに気付きました。
サンプルはこちら
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('');
}else {
document.write('');
}
これまた簡単に説明するとユーザーエージェントがiPhoneの場合は先ほどのリサイズするスクリプトが読み込まれ、それ以外の場合は何も読み込まれないっていう指示です。
document.writeめちゃ使える！これならユーザーエージェントごとにいろんなことに使えます！
でこれを使ってサンプルを作ってみたので興味ある方はPCとiPhoneで見比べてみてください。
サンプル
そんなんめんどいわっていう人用にiPhoneの表示でのキャプですｗ
こんな感じでさくっと綺麗に切り替えができていい感じ！
ちなみに大きい画像はリサイズされてますが小さい画像はそのままの表示ですので元々小さい画像がさらに小さくなるっていう心配も消えました。
自分用でもありますがせっかく作ったので以下からダウンロードできるようにします。
サンプルファイルのダウンロードはこちら
何かあったからってこっちに言ってきても責任はもちろん持ちませんので個人の責任でどうぞ。
を手にいれることができたのでさっそく読んでみました。
」でした。
