家にいるときは布団からほとんど出てこないYu-ichiです
最近寒いですね。
さて、以前にこんな記事でPCとスマホの表示を切り替える方法をご紹介しました。
PCとiPhoneやiPadの表示を分ける
これは「.htaccess」による切り替えなので、専用のページを用意して、
URLにアクセスしてきた端末のUAによって、表示するページを分けるというものでした。
今回は、同じページ内の一部をPCとスマホで変える方法をご紹介したいと思います。
例えば、PC用に作られたサイトでTOPページにFlashを使っていたりしませんか？
そのサイトにiPhoneでアクセスすると、Flash部分がごっそり無くなって空白ができてしまいます。
サイトのイメージを作っている部分であれば、iPhoneユーザーは何のサイトなのかわかりませんよね。
そこで、iPhoneやiPadでアクセスしてきた場合に、Flashではなく静止画を表示するようにするスクリプトをご紹介したいと思います。
直接上記のスクリプトを書いても良いですが、外部ファイル化しておいた方がいいでしょう。
if文でUAを判定して、当てはまるものは最初の「document.write」に書かれているものを表示し、
当てはまらなかったものは次の「document.write」に書かれているものを表示します。
今回はFlashと静止画の切り替えだったので、document.writeを使ってタグを書くようにしましたが、
他にも応用がきくと思いますので、いろいろ試してみてください。
ちなみに、Androidの判定をしたい場合は、if文に
<br />
navigator.userAgent.indexOf('Android') > 0<br />
を追加してあげてください。
新しいハードの登場で、ホームページの技術もどんどん進化していますね。
遅れないようにしないと！
