アーカイブ

Media Queries で​コンテンツ隠すの​やめたい

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

よく Media Queries のブレークポイントで PC 時と SP 時でリンク先ほかコンテンツを、出したり出さなかったりする制御をしたりするんだけどあれって本当にいいのかという話。そんなことあり得るのかお前とお思いでしょうがまあ聞いてください。

以下例えばですけど、

@media screen and (min-width: 641px) {
  // PC〜TAB時のとき表示
  .pc_hoge {
    display: inline;
  }
  // SP時は非表示
  .sp_hoge {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  // PC〜TAB時は非表示
  .pc_hoge {
    display: none;
  }
  // SP時のとき表示
  .sp_hoge {
    display: inline;
  }
}
<a href="http://xxxxxxxx" class="pc_hoge">PCのみ表示</a>
<a href="http://yyyyyyyy" class="sp_hoge">SPのみ表示</a>

こんな感じで a タグにクラス付けて表示・非表示するみたいな感じでやると思うけど、コレに関しての疑問。疑問というか個人的な感覚。

レスポンシブとして考えるとイカン気はする

レスポンシブ、基本1ソースなので PC と SP のソースが混同してしまうってのは良くない気がする。理由としては

こんな感じ。

正直別ソースで作れれば問題はないし、そもそも飛び先リンクが自動で切り替わるように調整しろよって話なんですけど、今回は別ソースにできずレスポンシブサイトを作る方面で且つリンク飛び先は何もしないという状況と仮定します。

こういう対応は、一時的な対応としてはアリだけど、上述の理由を考慮すると正しい方法ではないよなと感じます。というか RWD の対応じゃ限界を感じる。

ユーザーエージェント判定してみる

js ではユーザーエージェントを判定してそれぞれの処理を振り分けるなどのことが出来ます。なので例えば

// ユーザーエージェント判定の部分は省きます
var link = document.getElementById('ua');
if (ua.isPc) {
  // PC時のリンク先
  link.href = 'http://xxxxxxxx/';
} else if (ua.isTablet) {
  // TAB時のリンク先
  link.href = 'http://yyyyyyyy/';
} else if (ua.isSp) {
  // SP時のリンク先
  link.href = 'http://zzzzzzzz/';
}

みたいな感じで id 指定してリンク先を動的に変更するやり方。組み込むソース上には影響ないけどこのために id やら UA 判定やら js やら打つのかという問題もあります。仕方ないんですけど。

また、動的に html 出力するのも同様の棲み分けが出来そうです(WordPress のisMobileみたいなやつ)

結局どうしたいの

RWD の意味が無いからこういう対応するのやめたいし、やめてほしい。

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る