MediaクエリでブラウザごとにCSSでデザインを変更することはできるが、HTMLのタグの構造自体をデバイス毎に分けたい場合があります。
グローバルメニューなど、ブラウザとスマートフォンでHTMLの構造を変更したいという場合について考えていきます。10月12日記事
目次
全部同じブラウザで表示したい部分に関しては、そのままでいいですが、振り分けたい場合は<div id="deviceArea">というタグにし、そのタグをJavaScriptとjQueryで分けていきたいと思います。userAgentを取得し、その情報を基に振り分けしていきます。
共通です。
<!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>
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>');
};
});
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メソッドを使って変更していくことが特徴です。
以上
