#レスポンシブ対応の考察
レスポンシブ対応＝media-queryみたいなイメージがついてるが、
html枚で、端末毎に最適された画面が表示される対応のことである。
必ずしも、PCブラウザで画面サイズで変わるようにする必要性はない。
##レスポンシブ有効性
利点
- アクセス数の別URLによる分散が少ない。以下のような記述も必要なく設定ミスのリスクも低い
filename
<link rel="alternate" media="only screen and (max-width: 767px)" href="http://www.●●●.●●.jp/index.html">
- テキストなどの更新作業が一箇所になるため、作業漏れが少ない。
欠点
- アクセス端末以外のサイトを見ることは基本できない。（SP⇄PCができない）
- デザインによっては、CSSを上書きしながら作成する必要があるため、画面によってレイアウトがバラつく、レイアウト更新性が低くなる
##方法について
###① media-query利用
利点：
- jsを使わずに画面サイズの判別だけで作れる。
欠点：
- 画面幅だけの判断なので、タブレットとスマートフォンの中間を
補うのに手間がいる。これに伴ってoreantationchangeとresizeの使い分けなど、逆に後から複雑な調整を必要となることもある。 - media-queryの判別はclassを指定したものより描画が遅い。
- タブレットやスマートフォンの画面回転で表示がPCとスマフォという混在が起こる場合がある。
###② UA判定
利点：
- UAの判別ルールを理解していれば、そのルールが変わらない限り振り分けはスマートフォン、タブレット、PCと正確に分けられる
欠点：
- jsを切ると起点にしている画面しか表示されない。