【JavaScript】PCではtarget="_blank"を有効にし、タブレット、スマホではtarget="_blank"を無効にしたい。

Question

使用言語は、JavaScriptです。

PCではaタグのtarget="_blank"を有効にし、タブレット、スマホではtarget="_blank"を無効にしたいのですが、やり方がわからず質問いたします。

<script>
	let x = document.getElementsByTagName('a');

	if (window.matchMedia('screen and (min-width:1024px)').matches) {  //PC @media screen and (min-width:1024px)
		
		for (i = 0; i < x.length; i++) {
			x[i].setAttribute('target','_blank');
		}
		
	} else if (window.matchMedia('screen and (min-width:480px) and (max-width:1024px)').match) {  //タブレット @media screen and (min-width:480px) and (max-width:1024px)
		
		for (i = 0; i < x.length; i++) {
			x[i].setAttribute('target','');
		}
		
	} else if (window.matchMedia('screen and (max-width:480px)').match) {  //スマホ @media screen and (max-width:480px)

		for (i = 0; i < x.length; i++) {
			x[i].setAttribute('target','');
		}
	}	
</script>

自分なりにコードを考えてみたのですが、上記のコードではaタグにtarget="_blank"が設定されません。

よろしくお願いいたします。

Comments

[m.ts10806]

期待通りにならないとは、どうなるのでしょう。

Answer 1

window.matchMedia(略).match

.matchesが正しいのでは？

後はブラウザのデバッガーで想定通りの動きなのかをデバッグしていけば直ぐに直りますよ

Answer 2

PCではtarget="_blank"を有効にし、タブレット、スマホではtarget="_blank"を無効にしたい。

PC/高機能端末の切り分け　

ご質問に提示されたコードは、乱暴に言うと 画面の幅 を用いた分岐ですので、ご要望の判別をしていません。PC/高機能端末は navigaor のプロパティ値を使ってはいかがでしょうか。

値については、各ブラウザベンダの公表値がないかの調査や実機調査が必要になると思いますが、参考になればと思います。