「HTMLタグをデバイスごとに、javascriptとjQueryで振り分け」の編集履歴(バックアップ)一覧はこちら

HTMLタグをデバイスごとに、javascriptとjQueryで振り分け」(2015/10/11 (日) 22:31:47) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

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

表示オプション

横に並べて表示:
変化行の前後のみ表示: