CODEWITHSUNDEEP
jquerycss
Abdul Rafay
Abdul Rafay

Reputation: 807

Media queries for iPhone 14 (Pro, Max)

What are the CSS media queries to target Apple's latest devices?

2022 - Iphone 14 (Pro, Pro Max)

Upvotes: 3

Views: 10948

Answers (3)

Joffrey Outtier
Joffrey Outtier

Reputation: 920

This line of code can help you to have an harmony in your responsive design :

<meta name="viewport" content="width=device-width">

Upvotes: 0

Julian K&#246;hler
Julian K&#246;hler

Reputation: 29

I actually experienced that the iPhone 14 Pro Max Vieport is even 430px wide. So better adjust up to that or even higher

Upvotes: 2

harp
harp

Reputation: 109

For Iphone 14 Pro: 390 pixels width 844 pixels height (aprox.)

 @media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

Iphone Pro 14 MAX: 428 pixels width 926 pixels height

 @media only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) { }

Upvotes: 5

Related Questions