5月更新・前月(4月)の人気記事トップ10 05/02/2023
- ( 02 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 07 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【2022年7月】Mac画面解像度まとめ
- (圏外↑) 【GIMP】線を真っ直ぐ引く方法
- ( 08 ↓) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【2021年9月】iPhone画面解像度まとめ
こんにちは（・∀・）
新型iPhone 13の発表に伴いiPhone画面解像度のページを更新しました。
iPhone画面解像度一覧
この一覧に掲載されている情報は2021年9月の時点でアップルストア オンラインで購入できる製品の情報です。Apple製品取扱店で購入できる製品の情報は過去ページ【2020年10月】iPhone画面解像度まとめにてご確認いただけます。
(対角)
Super Retina XDRディスプレイ
CSSピクセル 926 x 428
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 844 x 390
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 844 x 390
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 780 x 360
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 926 x 428
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 844 x 390
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 844 x 390
(19:9)
Super Retina XDRディスプレイ
CSSピクセル 780 x 360
(19:9)
Retina HDディスプレイ
CSSピクセル 667 x 375
(16:9)
Liquid Retina HD ディスプレイ
CSSピクセル 896 x 414
(19:9)
ハイライトされたCSSピクセルの数値でコーディングします。
iPhone 13 Pro Maxは横幅428px、
iPhone 13 Pro、iPhone 13は横幅390px、
iPhone 13 miniは横幅360px、
iPhone 12 Pro Maxは横幅428px、
iPhone 12 Pro、iPhone 12は横幅390px、
iPhone 12 miniは横幅360px、
iPhone SEは横幅375px、
iPhone 11、iPhone XRは横幅414pxです。
画像等を作成する際はデバイスピクセルの数値を参考にしてください。
iPhone 13 Pro Maxは横幅428px x 3倍、
iPhone 13 Pro、iPhone 13は横幅390px x 3倍、
iPhone 13 miniは横幅360px x 3倍、
iPhone 12 Pro Maxは横幅428px x 3倍、
iPhone 12 Pro、iPhone 12は横幅390px x 3倍、
iPhone 12 miniは横幅360px x 3倍、
iPhone SEは横幅375px x 2倍、
iPhone 11は横幅414px x 2倍のサイズで画像を作って
CSSピクセルの大きさに縮小表示させると画像はキレイに表示されますす。
しかし、ファイルサイズが大きくなり過ぎるので1.5倍位のサイズで画像を作っても良いのではないかと思います。
関連ページ
【2021年10月】iPad画面解像度まとめ
【2020年10月】iPhone画面解像度まとめ
【2020年9月】iPad画面解像度まとめ
【2020年4月】iPad画面解像度まとめ
【2020年4月】iPhone画面解像度まとめ
【2018年11月】iPad画面解像度まとめ
【2018年9月】iPhone画面解像度まとめ
【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
【制作Tips】デバイスピクセルとCSSピクセル
【制作Tips】画面解像度一覧表