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

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

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

関連記事

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …

no image

ファビコンにチャレンジ。

この記事は約 1 分で読めます。前々から気になっていた「ファビコン」。 いろんなサイトのロゴとか何かのイラストとか・・、ブラウザのタブに小さなアイコンとして付いてるアレ・・。 せっかく自分のサイトを作 …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …