デザインしたサイズと実際に表示する端末サイズが異なるため、レイアウトが崩れてしまう

Question

質問者の状況

はじめてレスポンシブサイトの構築をしています。
学習歴1ヶ月ほどです。

Progateのhtml/CSSを一通りやったあと、知人クライアントからトライアルでLP作成の案件をいただきました。

レスポンシブ対応させる部分で躓いており、回答いただけますと幸いです。

前提

先方からスマホ表示のビューを640x1136(px)でデザインするよう指示がありました。
そのサイズで綺麗に表示されるようにグラフィックソフトでデザインしたあと、デザインのOKが出たのでコーディングを開始しました。
（関係上、その画面サイズ指示の意図を先方に直接聞けない状況です）

画像のサイズやpadding等の間隔指定、positionタグの位置指定等はほぼすべてpx単位で行い、各サイズ毎に数値を変更してコーディングしました。

発生している問題

指示のあった幅640px前提でデザインしたのですが、そのサイズ前提でコーディングするとiPhone等のスマホ表示ではレイアウト崩れが起きてしまいます。（例えばiPhone8の画面サイズは375pxなので当然なのですが）

質問1

この問題を解決するにあたり、以下の対処法を思いつきましたが、その他に解決法があれば教えていただきたいです。
0. iphoneなどのサイズでも崩れないようなデザインに作り直す
0. 大きなレイアウト崩れが起きないように、各サイズ指定をすべて%指定などで書き直す

質問2

そもそもスマホの表示を640pxと仮定すると今回のような問題が起きてしまうこともあるので、本来はiPhoneなどの普及しているデバイスサイズを基準にしたり、480pxあたりをブレークポイントにしてデザインしたほうがいいんじゃないかと未熟ながら感じたのですが、業界的にこの数字（スマホ表示の幅640pxを前提にしてデザインする）はセオリーとして普通なのでしょうか？

試したこと

<meta name="viewport" content="width=device-width, initial-scale=1">
ビューポートはとりあえず上記を記載していて、
この部分の「scale」をいじったりして特定のデバイスの場合だけ倍率を変えられないか試しましたが、うまくいきませんでした。

Answer 1

以下、参考URLを見てください。「640x1136px」というのはiPhone 5やiPhone SEの画像の解像度です。
CSSでは半分の「320x568px」となります。

スマホサイズのデザインラフの横幅が「640px」の場合、
横幅「320px」と解釈してCSSではすべての数値を半分にすればいいと思います。
横幅「375px」だと解釈すると、おそらく問題が生じると思います。

参考URL:
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

Comments

[kumagoro306]

回答ありがとうございます！
教えていただいた方法なら数字を半分にして書けばいいので、楽に対応できそうですね。
困っていたのでとても助かりました。

[new1ro]

> （関係上、その画面サイズ指示の意図を先方に直接聞けない状況です）
本当は、iPhone 5の画面サイズを想定してデザインをしていますか?
など確認することが大事です。

推測で進めてしまうとあとあと問題が生じます。
あくまで一般論としての話、とご理解ください。

[kumagoro306]

詳細ありがとうございます。確かにiPhone5のサイズぴったりですね。
はい、承知致しました。なんとか先方にもう少し聞いてみます。
いつもはどの端末を想定してデザインをするのか聞いていて、直接教えてもらえるのですが、今回担当させてもらったのは特殊なケース（レギュレーションでコードの書き方などが細かく決まっている）のようです^^;

[new1ro]

> いつもはどの端末を想定してデザインをするのか聞いていて、直接教えてもらえるのですが、今回担当させてもらったのは特殊なケース（レギュレーションでコードの書き方などが細かく決まっている）のようです^^;

大変そうですが、がんばってください！

[kumagoro306]

暖かいコメントありがとうございます！がんばります。
ちなみに、new1roさんのご推察の通り、iPhone5のサイズで合ってました！