Css - Target with factorized css iphones 4 and beyond

Question

I wish to target a css class only to iphones 4, 5, 6 and 6 plus I used this article but wonder if I could not factorize this. Indeed it seems to me that the first 2 device targeting (min width 320/max max width 480px and 568px, I could just use the largest max width and fuse them into only one declaration. It feels my code is just not clean enough and rather repetitive.

Here is my current code:

.example {
  @media 
    //iphone 4
    (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 5
    (min-device-width: 320px) 
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6
    (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6+
    (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
      color: yellow;
 }
}

Could I transform/factorize the aobve code into what follows ?

.example {
  @media 
    //mix iphone 4 and 5 
    (min-device-width: 320px) 
    and (max-device-width: 568pxpx)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6    
    (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6+
    (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
      color: red
 }
}

Also does this mean some android devices, such as for example the Samsung Galaxy 3 has same width as iphone 4 (320px), will also have the red color applied by my class 'example' ?

score 1 · Answer 1 · answered Mar 22 '17 at 16:28

Both of your code samples would apply to any phone that matches the requirements.

(min-device-width: 320px) and (max-device-width: 568pxpx)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait),`

I do not believe you can do device specific css in any way but you can attempt to get the OS of a device using javascript.

      navigator.userAgent.match(/iPhone/i)

This is one article that details their use article. This method is not future proof as I know because the userAgent field may be changed for iPhones later.

Ason · Accepted Answer · 2017-03-22T18:41:39.537

1

Since it is not easy to find the targeted device safely using CSS alone, this script in the head's script tag might help by both checking the user agent and device specific measurements.

If the function pass through it adds a class, iPhone456, to the html tag, which you can use in your CSS to target specific elements on those iPhone models.

Note, you might need to adjust the regex, but the solution will give you a good start

/* rules for iPhone 4,5,6 */
.iPhone456 div.test {
  color: red;
}

<head>
  <script>
    (function(d,s) {
      /* Set html class if iPhone 4,5,6 */
      if (!!navigator.userAgent.match(/iPhone/i)) {
        var w = s.availWidth, h = s.availHeight;
        if (
          (w === 320 && (h === 480 || h === 568)) ||
          (w === 375 && h === 667) ||
          (w === 414 && h === 736)
        ) {
          d.classList.add('iPhone456');
        }
      }
    })(document.documentElement,screen);
  </script>
</head>
<body>

<div class="test">Should be red on iPhone 4,5,6</div>

</body>

edited Mar 22 '17 at 18:41

answered Mar 22 '17 at 18:29

Ason

79,264
11
79
127

thanks for your help, definitely pushed me to right path. wondering why do you put if (!!navigator.userAgent.match(/iPhone/i)) instead of just if (navigator.userAgent.match(/iPhone/i)). What are those double !! ? – Mathieu Mar 23 '17 at 12:40
@Mathieu Making sure you get a boolean ... http://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript – Ason Mar 23 '17 at 12:42
nice ! indeed if you don't use your !!, on not-iphone devices I was getting js errors – Mathieu Mar 23 '17 at 13:25

Css - Target with factorized css iphones 4 and beyond

2 Answers2