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メソッドを使って変更していくことが特徴です。
以上