iPhone 6 and 6 Plus Media Queries

iPhone 6

  • Landscape@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }
  • Portrait@media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { } if you prefer you can use (device-width : 375px) and (device-height: 559px) in place of the min- and max- settings.It is not necessary to use all of these settings, and these are not all the possible settings. These are just the majority of possible options so you can pick and choose whichever ones meet your needs.
  • User Agenttested with my iPhone 6 (model MG6G2LL/A) with iOS 9.0 (13A4305g)# Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
  • Launch images
    • 750 x 1334 (@2x) for portrait
    • 1334 x 750 (@2x) for landscape
  • App icon
    • 120 x 120

iPhone 6+

  • Landscape@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { }
  • Portrait@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { }
  • Launch images
    • 1242 x 2208 (@3x) for portrait
    • 2208 x 1242 (@3x) for landscape
  • App icon
    • 180 x 180

iPhone 6 and 6+

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Predicted

According to the Apple website the iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080. The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI.

So, assuming that information is correct, we can write a media query for the iPhone 6:

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Note that device-aspect-ratio will be deprecated in http://dev.w3.org/csswg/mediaqueries-4/ and replaced with aspect-ratio

Min-width and max-width may be something like 1704 x 960.

Apple Watch (speculative)

Specs on the Watch are still a bit speculative since (as far as I’m aware) there has been no official spec sheet yet. But Apple did mention in this press release that the Watch will be available in two sizes.. 38mm and 42mm.

Further assuming.. that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work.. And I’m sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because..

@media (!small) and (damn-small), (omfg) { }

or

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

It’s worth noting that Media Queries Level 4 from W3C currently only available as a first public draft, once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind.

Related Posts:

  1. App iOS stuck on blank white screen when build release React Native
  2. iOS Simulator – Can’t log in with iCloud
  3. Load Animated gif in UIImageView IOS
  4. iOS: Random black screen when loading the app
  5. Drawing Hexagon grid in Cocos 2d-x
  6. iPhone system font
  7. libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)
  8. libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)
  9. Xcode 10.2.1 Command PhaseScriptExecution failed with a nonzero exit code
  10. How to write C++ on Mac?
  11. Linker Command failed with exit code 1 (use -v to see invocation), Xcode 8, Swift 3
  12. Linker Command failed with exit code 1 (use -v to see invocation), Xcode 8, Swift 3
  13. A server with the specified hostname could not be found
  14. Where is redeem code for public link for TestFlight?
  15. How do you create a Swift Date object?
  16. Xcode 10, Command CodeSign failed with a nonzero exit code
  17. Swift 4 Attempt to present ViewController whose view is not in the window hierarchy
  18. Xcode – How to fix ‘NSUnknownKeyException’, reason: … this class is not key value coding-compliant for the key X” error?
  19. What are the difference between macOS and iOS?
  20. Xcode couldn’t find any provisioning profiles matching
  21. Attempt to present UIViewController on UIViewController whose view is not in the window hierarchy
  22. symbol(s) not found for architecture x86_64 in xcode 10
  23. UITableView example for Swift
  24. Attempt to present UIViewController on UIViewController whose view is not in the window hierarchy
  25. Converting String to Int with Swift
  26. CFNetwork SSLHandshake failed (-9824) NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9824)
  27. Where is the variable “code” in SKError defined?
  28. @Media min-width & max-width
  29. Command CompileSwift failed with a nonzero exit code in Xcode 10
  30. Why are my CSS3 media queries not working on mobile devices?
  31. Is there a private messaging UI (inbox, sent, compose) framework for iOS?
  32. ‘strcmp’ was not declared in this scope
  33. malloc: *** error: incorrect checksum for freed object – object was probably modified after being freed
  34. Always get build error : No such module ‘Alamofire’
  35. NSURLErrorDomain error codes description
  36. What is correct media query for IPad Pro?
  37. what does Error “Thread 1:EXC_BAD_INSTRUCTION (code=EXC_I386_INVOP, subcode=0x0)” mean?
  38. CSS media queries: max-width OR max-height
  39. Duplicate symbols for architecture x86_64 under Xcode
  40. Print: Entry, “:CFBundleIdentifier”, Does Not Exist
  41. Date Format in Swift
  42. What the meaning of question mark ‘?’ in swift?
  43. Loaded nib but the ‘view’ outlet was not set
  44. Xcode 9 – “Fixed Width Constraints May Cause Clipping” and Other Localization Warnings
  45. Got a EXC_CORPSE_NOTIFY symbol crash, how to track it?
  46. “Could not find any information for class named ViewController”
  47. warning: ‘characters’ is deprecated: Please use String or Substring directly
  48. com.apple.WebKit.WebContent drops 113 error: Could not find specified service
  49. What is the difference between “screen” and “only screen” in media queries?
  50. Responsive media query not working in Google Chrome
  51. Could not insert new outlet connection: Could not find any information for the class named
  52. What is the meaning of ‘No bundle URL present’ in react-native?
  53. Is it possible to put CSS @media rules inline?
  54. Convert .cer to .p12
  55. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  56. Add a simple UIView as header of UICollectionView
  57. UIButton title text color
  58. Xcode: Could not locate device support files
  59. Remove alpha channel in an image
  60. Pod install is staying on “Setting up CocoaPods Master repo”
  61. Download Xcode simulator directly
  62. Swift Error: Variable used within its own initial value
  63. Alert”Developer tools access needs to take control of another process for debugging to continue.Type your password to allow this.”
  64. Could not load NIB in bundle
  65. Prepare for Segue in Swift
  66. Xcode error “Could not find Developer Disk Image”
  67. How to play a sound using Swift?
  68. IOS home screen icons: where put and what size?
  69. IOS Ventura Safari 16.3 position fixed elements goes above scroll bar
  70. Outline effect to text
  71. Transitions on the CSS display property
  72. text-align justify not working
  73. Set CSS property in JavaScript?
  74. How do you center a video using CSS
  75. Layout a flex box similar to a table?
  76. How to load scripts/styles specific for a page
  77. Assign a Class to the Current “Tag” for Formatting
  78. CSS stylesheet not loading
  79. Sticky navigation and the wpadminbar
  80. Theme’s default styles are overriding my plugin’s custom CSS
  81. Accessing Style Sheet Comment Like WordPress
  82. Distributing Frontend Assets with Plugins
  83. Is there any way to stylize articles one by one?
  84. Wooslider custom css
  85. adding the_custom_logo(); to header
  86. Posts are not rendering perfectly [closed]
  87. Thumbnail Image Rounded Corners w CSS (or any other good method)
  88. Hide entry-header for a specific category
  89. Help using ShortCodes to style whole chunks of the post
  90. Penscratch 2 – changing color of the main block
  91. Remove dashicons.min.css conditionally
  92. Remove Parent Style on Carousel
  93. Necessary css classes to be included in theme stylesheet
  94. Text Not Wrapping Around Right Floated Image [closed]
  95. Click to expand menu
  96. vertical menu bar css
  97. After upload on server 404 on all pages, no css
  98. Images at the same vertical position in multiple columns
  99. Add Quicksand for mobile devices
  100. can i custom rendered content from API?

Leave a Comment