iPhone 5 CSS media query

by

Another useful media feature is device-aspect-ratio.

Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Reference:
Media Queries @ W3C

iPhone Model Comparison

Aspect Ratio Calculator

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. iOS 6 apps – how to deal with iPhone 5 screen size? [duplicate]
  3. Why does the order of media queries matter in CSS?
  4. position: fixed doesn’t work on iPad and iPhone
  5. IE8 support for CSS Media Query
  6. Common breakpoints for media queries on a responsive site
  7. Should I use max-device-width or max-width?
  8. Black bars showing when running app on iOS 7 (4 inch retina display)
  9. iPhone WebKit CSS animations cause flicker
  10. :active pseudo-class doesn’t work in mobile safari
  11. Common CSS Media Queries Break Points [duplicate]
  12. Preserve HTML font-size when iPhone orientation changes from portrait to landscape
  13. Media Queries for Different zoom Levels of Browser
  14. Does overflow:hidden applied to work on iPhone Safari?
  15. Do iPhone / Android browsers support CSS @media handheld?
  16. CSS media queries – Order matters?
  17. Detect iPhone/iPad purely by css
  18. Styling input buttons for iPad and iPhone
  19. Responsive css styles on mobile devices ONLY
  20. Background image not showing on iPad and iPhone
  21. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  22. Which are the most important media queries to use in creating mobile responsive design?
  23. Font size rendering inconsistencies on an iPhone
  24. how to make responsive website for all devices [closed]
  25. How to make responsive table [closed]
  26. How can I avoid media query overlap?
  27. Bootstrap – Removing padding or margin when screen size is smaller
  28. Single vs multiple stylesheets in responsive web design
  29. Images for iphone 5 retina display
  30. Media Queries – Mobile vs Desktop Browser

Leave a Comment