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

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

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

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

WordPress 「Contact Form7」でエラーメッセージが出たときに確認したこと

この記事は約 1 分で読めます。 「Contact Form7 4.4」をバージョンアップした途端、エラーメッセージが出るようになりました。 エラーメッセージが出たことで、再度設定を見直すキッカケがで …

no image

WordPress 新着記事に「New!」表示をつけたい時

この記事は約 1 分で読めます。 以前、「WordPress 新着記事のタイトルを表示する方法。」を試してみましたが、記事タイトルの横に「NEW!」などの文字やアイコンを表示していませんでした。 表示 …