モバイル・PC判定を画面幅で行うかUserAgentで行うか

Question

rails5.2で作成したWebアプリがあります。

画面幅によって表示を切り分けたい部分があり、その判定を
CSSによる画面幅で行うか、UserAgentで行うか迷っています。

自分なりに比較してみました。

CSSの場合、以下のように表示、非表示を簡単に切り替えれますが、html上には同じidが残ってしまいます。
※idが被らないように配置すればいいだけですが、事情によりそれは今回できません。

<div id="test" class="mo">モバイル用</div>
<div id="test" class="pc">PC用</div>

@media screen and (min-width:300px){
  body{
    color: pink;
  }
  .pc{ display: none;}
  .mo{ display: block;}
}

@media screen and (min-width:700px){
  body{
    color: green;
  }
  .pc{ display: block;}
  .mo{ display: none;}
}

対して、UserAgentで判定すれば
html出力を制御できるので同一id問題はなくります。

<% if @agent == "mobile" %>
  <div id="test" class="mo">モバイル用</div>
<% else %>
  <div id="test" class="pc">PC用</div>
<% end %>

また、将来スマフォアプリ版をリリースした際は、モバイルからWebページにアクセスしたら
スマフォアプリ版のインストールを促すメッセージを表示できるように思いました。
実装が大変な部分もrailsなのでgemがありました。

こうなると、UserAgentの方が良いのかなぁという気がしてます。。。

が、初心者なので他にも気づいてない点、考慮すべき点がありそうで質問させていただきました。

皆さんならどう使い分けされますか？

先輩方アドバイスいただけないでしょうか？

宜しくお願い致します。

Comments

[hatena19]

> ※idが被らないように配置すればいいだけですが、事情によりそれは今回できません。
そのような理由が想像つかないので、その理由を追記してください。

idが被らないようにできないというのが絶対条件なら、UserAgentで切り替えるしかないです。
理由によっては別の解決策があるかもしれません。

Answer 1

html上には同じidが残ってしまいます。

残らないように書けばいいだけではないでしょうか。

<div id="test"><span class="mo">モバイル</span><span class="pc">PC</span>用</div>

Comments

[pecchan]

有難う御座います。

仰る通りなんですが、事情があってそれが出来ません。
記載漏れですみません。追記致します。

[maisumakun]

> ※idが被らないように配置すればいいだけですが、事情によりそれは今回できません。

「idがかぶらないように配置している」のではなく、「同じidで中身だけ切り替えている」ので、特定のidの要素は常に存在する状態ですが、それでもまずいのでしょうか？

[pecchan]

失礼しました。理解できました。
有難う御座います！

Answer 2

遥か昔に「UserAgentは見るべきではない」という結論が出てる。
iPhoneもAndroidもない携帯電話の頃はUserAgentで振り分けてることが多かったけどスマホの登場ですべて無駄になった。
携帯電話はhtml表示能力が貧弱とかそもそもhtmlでさえないとか特殊な事情があったので振り分けるしかなかった。

スマホの時代にはレスポンシブでほとんど解決するのでUserAgent見ることは滅多にない。