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 themin-
andmax-
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 Agent
tested 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.53Launch 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.
What are the device-width css viewport sizes of the iPhone6 and iPhone 6 Plus
(css) device-width of iPhone 6 is 375px, of iPhone 6 Plus is 414px. Note that iPhone 6 Plus report window.devicePixelRatio = 3
(while not truly at 3 DPR)
Update 1: just to clarify, I believe this is NOT a prediction, but actually tested. See more detailed and reputable reference. If in doubt, you can wait for device to be out.
Update 2: for users with Display Zoom enabled on iPhone 6, css viewport in Mobile Safari fallback to 320px (like iPhone 5); for iPhone 6 Plus, it fallback to 375px (like iPhone 6).
breakpoints in Iphone 6+
Well, first you have max-device-width
but it should be max-width
since device-width
is deprecated
Also, don't use the orientation
since it is not working (yet).
Your CSS would look like:
@media only screen and (max-width : 414px) {
.header-box {
background-color: #163A4E;
height: 550px;
margin-bottom: 0px;
padding: 0px;
}
.header-text h1 {
color:red;
}
.header-text h2 {
color:green;
}
}
/* Iphone 6 + and Nexus 6*/
@media only screen and (min-width : 415px) and (max-width : 736px) {
.header-text h1 {
color:yellow;
}
.header-text h2 {
color:pink;
}
}
How to differentiate Iphone x media query to Iphone 6,7,8 plus?
Because these not correct probably.
You are using -width
on one and -height
on the other so these media queries are not clamped exclusively.
I'm assuming the iPhone X is the biggest device but you are applying the rules from width 375px upwards... that's going to include ones that have width 414px and upwards.
It seems like this should cover all the iPhone scenarios:
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
You can get even more devices at:
- Media Queries for Standard Devices | CSS-Tricks
Platform Mode
Also, don't forget that Ionic lets you use the ios
selector in the sass to restrict the devices to ios mode:
- Overriding Mode Styles - Platform Styles - Ionic Documentation
So something like:
.ios ion-badge {
text-transform: uppercase;
}
Will restyle everything with the mode="ios"
set, which is done by default on ios devices, although it can be manually set to other values, so only use it if that's appropriate for your project.
CSS media query is not properly identifying iphone 6
I have an iPhone5, so I can't test it explicitly on my phone, but I did see these links for other Stack problems. Could be helpful to you.
http://qnimate.com/overview-of-css3-media-queries/#List_of_mostly_used_media_queries
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
Related Topics
Swift - How to Save Memory Using Alamofireimage/Imageshack
Googlemaps Basic iOS Demo App Crash - Unrecognized Selector Sent to Instance
Itsappusesnonexemptencryption Export Compliance While Internal Testing
Xcode Changes Unmodified Storyboard and Xib Files
Simply Mask a Uiview with a Rectangle
iOS - Delayed "Touch Down" Event for Uibutton in Uitableviewcell
Difference Between Presentviewcontroller and Uinavigationcontroller
Swift Performseguewithidentifier Not Working
How to Programmatically Increase Uitableview Cell's Height in Iphone
Method Load() Defines Objective-C Class Method 'Load', Which Is Not Permitted by Swift 1.2
Ccavenue iOS Kit Integration Kit
Dashed Line Border Around Uiview
Handling Touch Event in Uilabel and Hooking It Up to an Ibaction
iPhone - When to Calculate Heightforrowatindexpath for a Tableview When Each Cell Height Is Dynamic
How to Both Stroke and Fill with Nsattributedstring W/ Uilabel