PCだけCSSを適用する方法

  • 投稿 : 2018-09-15
pc-css01.png

方法はいろいろあると思います。
PCの時だけ、bodyタグのclassに、Javascriptで「pc」を入れます。

.pc a:hover {
  background: rgba(240,240,240,1);
}

こんな感じで書くと、PCの時だけa:hoverが適用されるようになります。

classに、「pc」を入れるスクリプト

<script>
document.addEventListener('DOMContentLoaded', function(){
 var mobile = /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
 if(mobile){

 }else{
    document.body.classList.add("pc");
 }
});
</script>

表示するページのどこかに上記のスクリプトを入れてください。PCの時だけ、bodyタグのclassにpcと入るかと思います。Chromeとかのデベロッパーツール(F12)で確認すればよくわかるかと思います。

そのほかの方法

@media screen and (min-width: 980px) {
  /*横幅が980px以上のとき= ほぼPC */
  a:hover {
    background: rgba(240,240,240,1);
  }
}

ネットでよく見かける方法は、上記のようなものです。
ただし、表示幅で判断してるので、確実ではないんですね。たとえば、iPadとかは上記だと微妙では?!


スポンサーリンク