0

Is there any media query that target only iphone 6s plus. My code working fine on iphone 6plus but there is some issue in iphone 6s plus. Is there any way to write specific media query for iphone 6s plus.

Any help would be appreciated.

omkar
  • 216
  • 2
  • 10
Mukeysh
  • 179
  • 3
  • 17
  • Can you even target a version of iPhone/iPod and not a version of iOS (7.x, 8.x and/or 9.x)? Otherwise, it's better to detect features not browsers or worse devices (Modernizr to the rescue!) or somewhat documented hacks from http://browserhacks.com (they work with PostCSS for the CSS ones). Worst case [UA detection](https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent) – FelipeAls Feb 05 '16 at 15:48
  • Hey allready asked here i think : http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries – Mat Feb 05 '16 at 16:41

2 Answers2

0

For Landscape

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (width : 736px) 
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 414/736)
    and (aspect-ratio : 736/414)
    and (device-pixel-ratio : 3)
    and (-webkit-min-device-pixel-ratio : 3)
    { }

Portrait

@media only screen 
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (width : 414px)
    and (height : 736px)
    and (orientation : portrait) 
    and (device-aspect-ratio : 414/736)
    and (aspect-ratio : 414/736)
    and (device-pixel-ratio : 3)
    and (-webkit-min-device-pixel-ratio : 3)
    { }
Akash Ryan
  • 341
  • 1
  • 9
-1

For Landscape : 

/* IPHONE 6 Plus Detection */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
    {
        /* code */
    }

For 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)
    {
        /* code */
    }
AB93
  • 1
  • 1
  • 1
    Welcome to Stack Overflow! Whilst this code snippet is welcome, and may provide some help, it would be [greatly improved if it included an explanation](//meta.stackexchange.com/q/114762) of *how* and *why* this solves the problem. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Feb 10 '17 at 12:45