jsにてユーザーエージェントを判別する方法。PCでのみ表示などが可能

まず初めに

こういう時ってないですか？

「レスポンシブだけど、なぜかブレイクポイントを作ってもipadだけ表示されてまう」
「そもそもipadとかiphone,androidやったら表示したくないねんけど」
「なんなんもう。。。」

上記みたいな時って、僕はありました。
masx-widthでブレイクポイント作ってもうまくいかない時

jsで判定して、あとからstyleを追加しよう

とりあえずコード

<script>
const isIPad = /iPad|Macintosh|iPhone|iPod|Android/i.test(navigator.userAgent)
&& 'ontouchend' in document

var pc_only = document.getElementById("pc_only");
if(isIPad){
  pc_only.style.setProperty("display", "none");
}
</script>

pcのみで表示させたい要素に"pc_only"のIDを付与してあげます。

HTMLが全部読み込まれたあとじゃないとダメなので、そこは注意しましょう。

では、良いPHPライフを！！