レスポンシブについて

Question

コードの疑問というよりは、レスポンシブの疑問ですので
テラテイルの使い方違反でしたら申し訳ございません。

レスポンシブ対応のサイトを作る際、
検証ツールで各種端末の大きさでレイアウトが崩れていないか確認するかと思うのですが、
iPhoneX ~ iPhone5でかなりの横幅差があったり、
CSSアニメーションをタブレットでは解除したいなどで
納得のレイアウトにならないことが多々あります。

この場合、シェア率の低い端末やアニメーション解除は妥協をするのでしょうか？
（崩れて妥協なのか、崩れないようにデザインし直すのかも知りたいです）

独学ゆえ、Web制作の現場ないし個人の皆様が普段どうされているのかをお聞きしたいです。

ちなみにメディアクエリの数値は以下です。

@media (max-width: 815px) //スマホ
@media (max-width: 1280px)　//タブレット

よろしくお願いいたします。

Answer 1

「対象端末をどこまでの範囲にするか」を要件定義で決めます。
それはコストであったり期間であったりターゲット顧客層であったり地域であったり様々です。

そのため、多くのWebサービスでは注意事項などに「対象ブラウザ」「対象OS」などが記載され「それ以外の動作は保証外」とします。

つまるところ、決め、次第です。

Answer 2

ブレイクポイントはPC,タブレット(max-width:1000px),スマホ(max-width:600px)の調整のみで大丈夫です。
しかし勘違いしてはいけないのが、妥協はしません。
コンテンツのサイズをpxではなく%で調整するとサイズがそれぞれのデバイスで自動調整され、ブレイクポイントを設定しなくてもレスポンシブに対応することができます。

Answer 3

最終的にはm.ts10806さんの仰る通りだとは思うので絶対ではないですが、割と一般的な感覚としてiphoneSEのサイズ（320px）まではまだ無視出来ないサイズかなって認識が多いと思います。

また、ブラウザ毎にも設定しないとダメな場合もあるため、複数のブラウザで複数のサイズをどうするかを決めた上で確認することをお勧めしますよ。