Last Updated on 2026年9月22日 by ワードプレスの学校 学長 柳内郁文
iPhone Duoが2026年10月23日発売されると、Appleが9月9日に正式発表しました。
日本には比較的多いiPhoneユーザーが多いので、WEB制作上、または運営上、注意したいポイントを考察していきたいと思います。
iPhone Duoの解像度は？
iPhone Duoの実際の表示サイズは、Appleの仕様を確認すると以下のとおりです。
閉じた状態：5.4インチ：1398 × 2034 px
開いた状態：7.6インチ：1878 × 2670 px
iPhone Duoのブレークポイントは？
結論から言うと、CSSのブレークポイントを1878pxや1398pxにする必要はありませんし、新しいブレークポイントを追加する必要もありません。
iPhone Duoのために単純に「新しいブレークポイント」を追加するというより、Duoの開いた状態を考慮したTablet系の設計にするのがよいです。
もし、タブレット用のブレークポイントの用意がないサイトの場合は、パソコンの表示の崩れがないかだけ確認しておくとよいでしょう。
iPhoneユーザーの状況
2026年8月のMMD研究所の調査では、18～79歳の4万人を対象にした「メインで利用しているスマートフォン」の割合が、
iPhone：45.6%
Android：54.1%
でした。
一方、Webサイトへの実際のアクセスという観点では、StatCounterの2026年8月データで日本のモバイルOSシェアは、
iOS：64.74%
Android：35.25%
となっています。
iPhone Duoの確認方法
自分のサイトがiPhone Duoで見た場合、どのように表示されるかを知りたい場合、実機を購入する必要はありません。
Google Chromeの開発モードで確認できます。
ChromeでF12キーか画面を右クリックで「検証」を選択すると下の画面が表示されますので、Editをクリックします。
すると下の画面が開きます。
その中に「iPhone Duo」があれば、チェックボックスを入れます。
なければ「Add Custom device」をクリック。
次の画面でiPhone Duoの画面サイズを入力して「Add」をクリックして保存します。
開いた状態：7.6インチ：1878 × 2670 px
この設定ですと表示を50％にしないと全体が表示されません。
50％にすると文字やスペースなどのイメージが沸かないかもしれません。
ただ、全体を縮小して見たいという場合は、適しているかも知れません。
100％で見るなら以下の設定になります。
939 ✕ 1335 で登録すると良い感じで確認することができます。
まとめ
新しくなったiPhoneの折りたたみスマホiPhone Duoに合わせてブレークポイントを追加や変更する必要がなく、実機をわざわざ買わずともChromeの開発モードで確認することが出来ます。
特に閉じたときはこれまでと大きく変わりませんが、開いたときが、少しきになるので、Chromeの開発モードで確認できます。
確認方法は先ほど解説したとおりですので、念のため、くずれがないか確認してみてください。