Menu
What are the CSS media queries to target Apple's latest devices?
2019 devices: iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max.
2020 devices: iPhone 12 mini, iPhone 12, iPhone 12 Pro and iPhone 12 Pro Max.
2021 devices: iPhone 13 mini, iPhone 13, iPhone 13 Pro and iPhone 13 Pro Max.
905
A number of iPhone 13 users are complaining about touch issues where the device's display doesn't respond to swipes and gestures. We're also hearing 5G cellular data issues. Some users are saying cellular service is dropping unexpectedly. Others are complaining about the speed of 5G.
The iPhone 13 Pro has a display size of 6.1 inches and the iPhone 13 Pro Max has a display size of 6.7 inches. This means that the larger phone will be able to show more content on the screen, with the UI elements of apps spaced further apart and items such as the keyboard being much bigger.
/* 2340x1080 pixels at 476ppi */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X
/* 2532x1170 pixels at 460ppi */ @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { } This media query is used for: iPhone 13, iPhone 12 and iPhone 12 Pro
/* 2778x1284 pixels at 458ppi */ @media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) { } This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max
/* 1792x828px at 326ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { } This media query is used for: iPhone 11 and iPhone XR
/* 2436x1125px at 458ppi */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X
/* 2688x1242px at 458ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { } This media query is used for: iPhone 11 Pro Max and iPhone Xs Max
Use the following code to add landscape or portrait orientation:
and (orientation: portrait) and (orientation: landscape) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With