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

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

フッターをブラウザの下部に固定する方法

この記事は約 1 分で読めます。 コンテンツが少ない場合、フッターの下に余白が出来てしまいます。 さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試し …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …