スマホサイトの幅980pxは大丈夫なのか？

Question

スマホサイトの幅について

レスポンシブサイトを今製作しているのですが幅980pxで作成しているケースをあまりwebで見かけません

981px以上 PC
980px以下はタブレット/スマホで今作成しているのですがこれは問題のある作り方のでしょうか？

viewpointは今つけてませんが必要ならjsで980px以下の時配置しようと考えてます。

Comments

[m.ts10806]

実際に問題が起きたうえでの質問でしょうか。

[halmikami]

作ってみてわかったのですがPCサイトのレイアウトのコンテンツ幅が1080pxあったので980pxでcss切り替えると見栄えが悪くなる程度でPCで見てもスマホでもても今の所問題なしです。ですがiphone11proではみてないので対応が要りそうです。

Answer 1

あくまで個人的な意見ですが
1080px以上をPC、
450px以下をスマホ、
それ以外をタブレットとしてみています。

理由は以下の通りです。
現在販売されているディスプレイの主流はFHD(19201080)、4K(38402160)である
最新のiPhone11Proは縦に持った時に横幅が414ptであること
です。

iPhone11ProについてはRentinaディスプレイの関係でviewportを設定しないと端末の画面サイズは1242x2688（ツールバーを含む）と受け取られてしまいます。
viewportを設定すると414x896（同様）と受け取られます。

まぁ、これをどう受け取るかは人次第です。
ちなみに450pxじゃなくて650pxにすることもあります。

Comments

[halmikami]

なるほど

作成し終わった後に回答拝謁してますが981px以上をPCにすると980pxで問題のあるレイアウトになりまり1080とか1024とかでpcにするのがいいのかなと思いました。

ihpne11proについてはデフォルトでviewpoint980pxではないんですね。

レスポンシブも面倒だしスマホ用別ページ作るのも面倒なので

スマホタブレット共用レイアウトとPC分ける幅は980pxでは難ありでした。

[kyoya0819]

何というか自分の視点で言うとデザイン界では何通りかありまして、

・異様に高いシェアのiPhoneのサイズまでをスマホと見る（450px）
・小さいタブレットもスマホに含むと見る（650px）

・スマホ,タブレット,PCの3パターン
・スマホ,タブレット&PCの2パターン
てな感じです。