0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

iPhone Duoのアウターディスプレイ、Fluid Responsiveなら追加対応は不要だった

0
Posted at

iPhone Duoのアウターディスプレイ、Fluid Responsiveなら追加対応は不要だった

2026年9月9日、Appleから折りたたみiPhone「iPhone Duo」が発表されました。

Appleが公開した仕様では、アウターディスプレイは5.4インチ、解像度は 1,398 × 2,034px / 460ppi。

新しいフォームファクタということで、普段使っているレスポンシブ設計で追加対応が必要になるのか確認しました。

結論として、少なくともアウターディスプレイについては、

追加対応は必要なさそうです。

普段の基準は360px

僕は2019年頃から、スマートフォン向けUIを 360pxを基準としたFluid Responsive で設計しています。

特定のiPhoneやAndroidをbreakpointとして扱うのではなく、360pxを基準として画面幅に合わせてレイアウト全体を比例させます。

本文16pxの場合なら、

360px → 16px
375px → 16.67px
390px → 17.33px

という考え方です。

今回のiPhone Duoでまず気になっていたのは、アウターディスプレイが極端に細くなり、この通常の対応範囲から外れるかどうかでした。

しかし公開された仕様を見る限り、その心配はありませんでした。

つまり今回、

iPhone Duo向けに対応したのではなく、もともとの対応範囲から外れなかった。

というのが近いです。

実装方法は追記します

今回は発表直後なので、まず確認結果だけ。

実際に使っているFluid Responsiveの実装方法や、360pxを基準として各値をどう扱っているかについては、この記事に追記していきます。

なお、

  • なぜ360pxなのか
  • なぜ本文16pxなのか
  • なぜデザインカンプの比率を維持するのか
  • 2019年からこの方法を使っている理由

といった設計思想についてはnoteに書きました。

設計思想はこちら:
[https://note.com/masatojpn/n/nd422c89cff2a]


参考

※2026年9月10日時点の公開情報をもとにしています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?