「HTMLタグをデバイスごとに、javascriptとjQueryで振り分け」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
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メソッドを使って変更していくことが特徴です。
~
~
以上