デバイスに応じてタグを書き換える方法[Jquery]

つくね

8年前

Webサービスを運用していますと、広告を入れるごとにいろいろなタグを設置しないとだめですよね。
特に最近ではスマートフォンからのアクセスの場合と、PCからのアクセスでタグを出しわけろというやつ。
少し前はJavascriptでdocument.writeってやってたんですけど、どうやらGoogleが強く推奨しなくなったので、JqueryでIDを変更する方法を見つけました。

多分今後も使いそうなので、覚え書きです。

こんな雰囲気ですね。
JqueryでIDを書き換えるのは「.attr」を使えば超楽々。
UserAgentで判断してattrで書き換えます。

<html>
<head>
	<script src="js/jquery.min.js"></script>
	<script>
	$(function(){
		var userAgent = window.navigator.userAgent.toLowerCase();
		if (userAgent.indexOf('ipad') != -1) {
			$('#test').attr('id', 'test_tab111');
		}else if(userAgent.indexOf('iphone') != -1){
			$('#test').attr('id', 'test_sp111');
		}else if(userAgent.indexOf('Android') != -1){
			$('#test').attr('id', 'test_sp111');
		}else{
			$('#test').attr('id', 'test_pc111');
		};
	});
	</script>

</head>
<body>
<div id="test">
	<ul>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
	</ul>
</body>

おすすめ: