CODEWITHSUNDEEP
ioscssmedia-queriessmartphone
user128511
user128511

Reputation:

iPhone4/4S vs other media queries

I'm trying to get a media query for smaller devices only, in particular iPhone4 vs iPhone5 and larger. I haven't even started android. I tried the media queries I found here but I'm not having any luck.

Here's a simple test.

<!DOCTYPE html>
<html>
<head>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
  <meta name="format-detection" content="telephone=no" />
<style>
body { background-color: blue; }

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  body { background-color: red; }
}
</style>
</head>
<body>
Testing
</body>
</html>

I expected it to be red only on iPhone4/4S and blue everywhere else but instead it's red on iPhone4/4S/5/5s/6/6Plus. It's blue on iPadAir, iPad Retina, and Desktop.

I tried adding the iPhone5/5s queries from the same page so I have both the iPhone4/4s queries and the iPhone5/5s queries. In this case I get green on 4/4s/5/5s/6/6Plus whereas supposedly I'm supposed to get red on 4/4s, green on 5/5s and blue everywhere else.

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { background-color: green; }
}

Some other things I tried. I got rid of all the meta tags. No change. I don't really care about the min device pixel ratio. All I care about is if the screen is too small vs not too small. Big enough is iPhone5/5s. Anything smaller I need to do special stuff.

How do I get it to be red only on iPhone4? (or on smaller than iPhone5/5s)

NOTE: I'm trying to avoid settings things for iPhone4 and then resetting them for anything larger because I have about 20 settings I need to change for small screens. In other words, 20 settings are the default and only for iPhone4 sized screens do I need to change those settings. I don't want to have to set them 3 times if possible.

In other words I want this

default css 
iPhone4 {
  a few overrides
}

not this

default css
iPhone4 {
 a few overrides
}
notIPhone4 {
  try to undo overrides // :(
}

Upvotes: 1

Views: 87

Answers (1)

Qorbani
Qorbani

Reputation: 5905

You can use device-aspect-ratio which is another great features of media query:

body { background-color: blue; }
@media screen and (device-aspect-ratio: 2/3) {
    body { background-color: red; }
}

Here is more device-aspect-ratio that I got from here:

  • iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {}
  • iPhone 5: @media screen and (device-aspect-ratio: 40/71) {}
  • iPhone 6: @media screen and (device-aspect-ratio: 667/375) {}
  • iPhone 6 Plus: @media screen and (device-aspect-ratio: 16/9) {}

Also you can be really specific if you want to target one model only, for instance for iPhone 6 Plus I use following which I got from here:

@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) 
{ ... }

Upvotes: 1

Related Questions