Adobe Muse Media Queries Css
This question already has an answer here:
- iPhone 6 and 6 Plus Media Queries 7 answers
According to Apple's site:
Media queries can also be used to change layout of a page depending on the orientation of the browser. CSS @media Reference.
The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical)
The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical)
However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape)
Css Media Queries Device
I don't fully understand how to test the retina screen sizes using the various responsive emulators out there. Any help would be much appreciated.
Vadim Kotovmarked as duplicate by Mo., Shankar Damodaran, Mureinik, Mark Rotteveel, benkaOct 5 '14 at 8:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
2 Answers
You're referencing the physical pixels of the device, rather than the css device-width sizes. According to this tweet, the device-widths for the two will be:
Knowing that (and assuming the tweet is correct), and assuming your using the proper meta viewport tag, you're looking at roughly:
Hope this helps!
Edit:
Regarding the 2.6 DPR of the iPhone 6 Plus, it's actually 3.0 DPR downsized by 1.15, which results in 2.6 DPR. More info can be found at http://www.paintcodeapp.com/news/iphone-6-screens-demystified for clarification (thanks @mdcarter for the link!)
You can get list of media queries for all standard devices here
sputn1k