Webの記録

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき

投稿日:2013年8月2日 更新日:

この記事は約 3 分で読めます。

PCとタブレットイメージ

以前はPCだけを意識してWebサイトを制作してきました。

しかし、最近はだんたんとPC以外(iPhone,iPad,Android)のタブレット系端末のアクセスが増え、PCだけでなくタブレット専用のWebページを制作する機会も出てきました。

そういう場合に、簡単にPCとPC以外(iPhone,iPad,Android)のタブレット系端末を判断して、ページを切り替える事もあります。

今回、BlackFlagさまの「jQuery(JavaScript)を使って簡単に別のURLへリダイレクトさせる方法」を試してみて便利だったので、メモとして残します。

(注)この方法は、ページの少ない小規模なサイト向きです。




この記事の目次

  1. 設置前の説明
  2. 設置方法
  3. 参考サイト

1.設置前の説明

PC用のページにPC以外(iPhone,iPad,Android)のタブレット系端末がアクセスした際に、タブレット用のページにリダイレクトする方法となります。

その為、設定はPC用のページにjQueryを読みこませて、デバイス判定をさせる事となります。

2.設置方法

PC用・タブレット用のページをそれぞれ作成後に、以下のjsファイルを作成します。名前はお好きなようにつけてください。
3行目の’●●’の中はリダイレクトしたいタブレット用ページのパスを入れてください。

$(function(){
    var agent = navigator.userAgent;
    var redirectPass = '●●';

    if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
        location.href = redirectPass;
    }
});

あとはPC用のページのheaderにjsを読みこませるだけです。(redirect.jsという名前にしてみました)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/redirect.js"></script>

3.参考サイト

今回、この方法を試すにあたって参考にさせていただきました。
BlackFlagさま「jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト
BlackFlagさま「Androidでモバイルとタブレット(+iPhone/iPad)を振り分ける方法
RubyRailsさま「JavascriptでiPhone/Android

他にjQueryを使わずに.htaccessを使ってリダイレクトしたり、後はMedia QueriesやCSSで分岐など、いろいろ切り分ける方法がありますが、今回はjQueryを使ってみました。

きっとこれから、タブレット系に関していろいろ気を付けることが増えてきそうなので、また気がついたらメモを加えていこうと思います。

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …

no image

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

Evernote Site Memoryボタンを付けてみた♪

この記事は約 1 分で読めます。日頃、いろいろな情報をEvernoteにまとめています。 使い始めるとホントに便利で、無くてはならない存在になっています。 ・・・で、Evernoteで便利な方法はない …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …