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.

関連記事

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …