JavaScriptでiPadをユーザーエージェントでわけてCSSを読み込む

Web制作

2020.05.21

レスポンシブウェブデザインでスマホやタブレット、PCの表示切り替えが標準ととなっていますが、時々、iPadやPCといったデバイスごとにCSSの読み込みを表示を切り替えたい場合があります。

その場合、ユーザーエージェントによって読み込むCSSを追加するケースです

<script>
  var agent = window.navigator.userAgent.toLowerCase();
  var ipad = agent.indexOf('ipad') > -1 || agent.indexOf('macintosh') > -1 && 'ontouchend' in document;
  if(ipad == true){
      document.write('<link rel="stylesheet" href="<?php  echo get_template_directory_uri(); ?>/css/ipad.css">');
  }
</script>