MediaクエリでブラウザごとにCSSでデザインを変更することはできるが、HTMLのタグの構造自体をデバイス毎に分けたい場合があります。 グローバルメニューなど、ブラウザとスマートフォンでHTMLの構造を変更したいという場合について考えていきます。10月12日記事

目次





振り分けしたいタグは全部js部分に記述

全部同じブラウザで表示したい部分に関しては、そのままでいいですが、振り分けたい場合は<div id="deviceArea">というタグにし、そのタグをJavaScriptとjQueryで分けていきたいと思います。userAgentを取得し、その情報を基に振り分けしていきます。

HTMLタグ

共通です。

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="device.js"></script><!--別にjsファイルを作る。-->
<meta charset="utf-8">
<title>JavaScriptでタグの振り分け</title>
</head>
<body>
    <div><p>ここは全ブラウザ共通部分</p></div>
    <div id="deviceArea"></div>
    <div><p>ここも全ブラウザ共通部分</p></div>
</body>
</html>



Javascript及び、jQueryのコード

iPhone,iPad,Android,PCの4つに分ける。

HTMLの方は共通でいいです。(device.js)

// JavaScript Document
$(function(){
//useragentの取得
var userAgent = window.navigator.userAgent.toLowerCase();


if (userAgent.indexOf('ipad') != -1) {
	//iPad
	$('#deviceArea').html('<p>iPad</p>');
	}else if(userAgent.indexOf('iphone') != -1){
	//iphone
	$('#deviceArea').html('<span>iPhoneですよ。</span>');
	}else if(userAgent.indexOf('Android') != -1){
	//Android
	$('#deviceArea').html('<dl><dt>デバイス</dt><dd>ここはAndroid</dd></dl>');
	}else{
	//それ以外
	$('#deviceArea').html('<ul><li>iPhoneではない</li><li>iPadではない</li><li>Androidではない</li></ul>');
	};
});

(iPhone,iPad,Android)と(PC)の2つに分ける。

HTMLの方は共通でいいです。(device.js)

// JavaScript Document
$(function(){
//useragentの取得
var userAgent = window.navigator.userAgent.toLowerCase();

$(function(){
	//useragentの取得
	var userAgent = window.navigator.userAgent.toLowerCase();
	if ((userAgent.indexOf('ipad') != -1) || (userAgent.indexOf('iphone') != -1) || (userAgent.indexOf('Android') != -1)) {
		$('#deviceArea').html('<p>iPhone,iPad,Androidですよ。</p>');
		}else{
		//三つ以外
		$('#deviceArea').html('<ul><li>iPhone以外</li><li>iPad以外</li><li>Android以外</li></p>');
	      };
	});
});



まとめ

タグを別の種類に変えても当然対応はできます。.htmlメソッドを使って変更していくことが特徴です。

以上

最終更新:2015年10月11日 22:31