Iphone 6 and 6 Plus Media Queries

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 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.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.

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.

Media Queries - Target iPhone 6/ 6 Plus without older iPhones

I guess there is not a CSS3 solution to this question?

Most Media Queries will conflict.

I have decided to answer my own question with a JavaScript approach. I hope it helps.

This will cover most scenarios. You can then add different styles for each added class.

The width checks for portrait and the height checks for landscape basically. Pretty simple.

var $banner = $('#banner'),
    h = window.innerHeight,
    w = window.innerWidth;

if (w === 320 || h === 320) {
    //iPhone 5 or below
    $banner.addClass('iPhone');
} else if (w === 375 || h === 375) {
    //iPhone 6
    $banner.addClass('iPhone6');
} else if (w === 414 || h === 414) {
    //iPhone 6 Plus
    $banner.addClass('iPhone6Plus');
} else if (w === 346 || h === 346) {
    //Smart phone e.g. Q10
    $banner.addClass('smartPhoneSmall');
} else if (w === 360 || h === 360) {
    //Smart phone e.g. Samsung Galaxy S3/ S4
    $banner.addClass('smartPhoneMed');
} else if (w === 384 || h === 384) {
    //Smart phone e.g. LG Nexus 4
    $banner.addClass('smartPhoneBig');
} else if (w === 400 || h === 400) {
    //Smart phone e.g. Samsung Galaxy Note
    $banner.addClass('smartPhoneLarge');
}

Phone CSS width reference: http://mydevice.io/devices/

EDIT: I forgot about nesting so you can do it with CSS3

/* Portrait Styles */
@media only screen and (orientation : portrait) {
    @media only screen and (min-device-width: 346px) and (max-device-width: 359px) {
        /* Small Smartphones e.g. Q10 */
        .banner {
            height: 129px;
            width: 346px;
        }
    }
    @media only screen and (min-device-width: 360px) and (max-device-width: 374px) {
        /* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
        .banner {
            height: 135px;
            width: 360px;
        }
    }
    @media only screen and (min-device-width: 375px) and (max-device-width: 383px) {
        /* iPhone 6 */
        .banner {
            height: 140px;
            width: 375px;
        }
    }
    @media only screen and (min-device-width: 384px) and (max-device-width: 399px) {
        /* Big Smartphones e.g. LG Nexus 4 */
        .banner {
            height: 144px;
            width: 384px;
        }
    }
    @media only screen and (min-device-width: 400px) and (max-device-width: 413px) {
        /* Large Smartphones e.g. Samsung Galaxy Note */
        .banner {
            height: 150px;
            width: 400px;
        }
    }
    @media only screen and (min-device-width: 414px) {
        /* iPhone 6 Plus */
        .banner {
            height: 155px;
            width: 414px;
        }
    }
}

/* Landscape Styles */
@media only screen and (orientation: landscape) {
    @media only screen and (min-device-height: 346px) and (max-device-height: 359px) {
        /* Small Smartphones e.g. Q10 */
        .banner {
            height: 129px;
            width: 346px;
        }
    }
    @media only screen and (min-device-height: 360px) and (max-device-height: 374px) {
        /* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
        .banner {
            height: 135px;
            width: 360px;
        }
    }
    @media only screen and (min-device-height: 375px) and (max-device-height: 383px) {
        /* iPhone 6 */
        .banner {
            height: 140px;
            width: 375px;
        }
    }
    @media only screen and (min-device-height: 384px) and (max-device-height: 399px) {
        /* Big Smartphones e.g. LG Nexus 4 */
        .banner {
            height: 144px;
            width: 384px;
        }
    }
    @media only screen and (min-device-height: 400px) and (max-device-height: 413px) {
        /* Large Smartphones e.g. Samsung Galaxy Note */
        .banner {
            height: 150px;
            width: 400px;
        }
    }
    @media only screen and (min-device-height: 414px) {
        /* iPhone 6 Plus */
        .banner {
            height: 155px;
            width: 414px;
        }
    }
}

Related Topics

Create Tap-Able "Links" in the Nsattributedstring of a Uilabel

Looking to Understand the iOS Uiviewcontroller Lifecycle

Nsnotificationcenter Addobserver in Swift

Ios Launching Settings -≫ Restrictions Url Scheme

Periodic iOS Background Location Updates

How to Apply Gradient to Background View of iOS Swift App

How to Find Out the Type of an Object (In Swift)

Max Size of an iOS Application

-Didselectrowatindexpath: Not Being Called

Move Textfield Up When the Keyboard Has Appeared in Swiftui

What Happens When Testflight App Expire

Send and Receive Messages Through Nsnotificationcenter in Objective-C

Spritekit - Creating a Timer

Cfnetwork Sslhandshake Failed iOS 9

Get to Uiviewcontroller from Uiview

How to Create a Multiline Textfield in Swiftui

Class Does Not Implement Its Superclass'S Required Members

Iphone Keyboard Covers Uitextfield


Leave a reply



Submit