下記は、主なAndroid OSのdp解像度、iOSのCSSピクセル解像度です。
Android OSのdp解像度と、iOSのCSSピクセル解像度は、(実際の物理・解像度とは違う)ブラウザ用の仮想的な解像度となります。
厳密には両者の仕組みは違いますが、実質的には、ほぼ同じと思って良いでしょう。
下記の様々な解像度を見て分かるように、px単位で指定したら、レスポンシブ・デザインは無理だと言う事を意味しています(ただし、@media(メディアクエリ)はpx単位で指定しますが)。
分かり易く言うと、モバイル(タブレット、スマホ)用ページでpx単位を使ったら、ベンダーに殴られます(笑)
以下は、「モバイル端末の縦向き画面においてのブラウザ用の主な仮想的な横解像度と、括弧内は縦解像度」のAIによる解説の要約(下記で解像度にpx単位が表記されている場合は、CSSピクセルの意味)。
【Android OS端末の縦向きdp解像度】
❲Androidスマホの縦向き画面(ポートレート)❳
320dp(640dp)
360dp(640dp/780dp/800dp/840dp)
375dp(667dp/812dp)
390dp(844dp)
410dp(730dp)
414dp(736dp/896dp)
448dp(998dp)
480dp(1040dp/1075dp)
540dp(1170dp/1200dp)
❲Androidタブレット縦向き画面(ポートレート)❳
600dp(1024dp)
720dp(1280dp/800dp)
768dp(1024dp)
800dp(1280dp)
【iOS端末の縦向きCSSピクセル解像度】
❲iPhone端末の縦向き画面❳
iPhone 4 / 4S:320px (480px)
iPhone 5 / 5c / 5s / SE 第1世代:320px (568px)
iPhone 6 / 6s / 7 / 8 / SE 第2・第3世代:375px (667px)
iPhone X / XS / 11 Pro / 13 mini:375px (812px)
iPhone 6 Plus / 6s Plus / 7 Plus / 8 Plus:414px (736px)
iPhone XR / XS Max / 11 / 11 Pro Max:414px (896px)
iPhone 12 mini:360px (780px)
iPhone 12 / 12 Pro / 13 / 13 Pro:390px (844px)
iPhone 12 Pro Max / 13 Pro Max / 14 Plus:428px (926px)
iPhone 14 Pro Max:430px (932px)
❲iPadの縦向き画面❳
iPad 9.7インチ / iPad mini 第1〜5世代:768px (1024px)
iPad mini 第6世代:744px (1133px)
iPad Air 第4・5世代 / iPad 第10世代:820px (1180px)
iPad Pro 10.5インチ / iPad Air 第3世代:834px (1112px)
iPad Pro 11インチ:834px (1194px)
iPad Pro 12.9インチ:1024px (1366px)
【dp単位】
Android OSのdp単位(density-independent pixels単位)
Android OS専用のUI単位であり、
画面密度を仮想的に160dpiに変換し、それを基準として 1dp = 1px(標準密度時)とし、見た目の大きさを揃えられる。
【CSSピクセル単位】
iOSの CSS px単位
Web表示の標準単位であり、iOSでもSafari/アプリWebViewで利用される
実際の物理ピクセルとは一致せず、スケール倍率で拡大表示される。