Media Query iPad VS Iphone4

Media query ipad vs iphone4

Modify your iPhone 4 media query to target high density pixel displays (retina = iPhone4)

@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }

---

Didn't notice you reopened the question with an expansion so here is a reworked answer to target both iphones (3 and 4) and ipads.

Breakdown of what you should expect:

• On regular browsers you should get the teal background color.
• orange on an ipad (landscape).
• black on an ipad (portrait)
• red on an iphone 4 (portrait)
• pink on an iphone 4 (landscape)
• green on regular smartphones, e.g Androids (landscape)
• purple on a regular smartphone (portrait)

CSS

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`<!-- language-all: lang-css -->

I reformatted the @media queries found in this fine article over at CSS-tricks to comply to some iphone4-specific bits, but overall this media query set should cover both iphones (3 and 4 with separate media queries) and ipads as well.

Here is a demo you can try in your i-devices.

http://jsfiddle.net/andresilich/SpbC3/4/show/

And you can also try out the queries over at http://quirktools.com/screenfly/ to see how they stack up. One thing though, the screenfly site does not differentiate between iphone 3 and 4 because regular browsers skip the webkit only -webkit-min-device-pixel-ratio : 1.5 pixel ratio count so you will get better results testing it out in your actual device.

media queries for iPhone 4, iPhone 4s and iPhone 5

For the iPhone5, I use pixel ratio 1.5. For the iPhone 4/4S, I use a combination of pixel width and pixel ratio.

/* iPhone5+ */ 
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5){
    body {
        background-color: red;
    }
}

/* iPhone 4/4S */
@media 
    only screen and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (device-aspect-ratio: 2/3)
{
    body {
        background-color: yellow;
    }
}

Media query to target iphone/mobile/ipad

Try with below media query and meta tag

/* For mobile : like samsung grand(480 * 800): */
@media screen and (max-width : 480px){}

/* For iphone: */
@media screen and (max-width : 320px){} 

/* For ipad: */
@media screen and (max-width : 768px){} 

Additionally. change your meta tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Media query does not work with iPhone 4/4S

Here is a fiddle of your HTML and CSS; the media query works as it should. (Tested on a Samsung Android smart phone with default Samsung browser and a desktop PC in IE11.)

If it works for you from the fiddle but not from your QuirkTools page, there may be an issue with that page or with how the CSS is linked there.

Note that the iPhone/portrait query is the only one that will actually change anything -- any devices that don't fit that query (below) will use your default CSS settings.

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

Media queries conflicting across devices

How wide do you think an iPhone 4 is (in pixels) and what do you think it's scale value is? reading your rules, I feel like you're trying to say "if it's a big phone, make this 480 wide. if it's a smaller phone that's retina, make it 480 wide, otherwise, 768"

but in reality, an iphone4 is 320 pixels wide, with a scale of 2, so you'd want to make your container 320px wide, and then do something with background-size:contain for images

However, ignoring that... this page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
@media (max-width: 767px) { body {background-color:#0000FF;} }
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
@media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

Appears:

• blue in an iPod touch
• blue in an Android Nexus S
• blue in a Blackberry Bold
• green in an iPhone4
• red in an iPad

you can go to http://www.robotwoods.com/dev/misc/so_media2.html if you have other devices to test. And I posted a little entry about media queries here: http://blog.robotwoods.com/2012/08/media-queries/ but didn't really get into the pixel-ratio aspect

How to target iPhone 3GS AND iPhone 4 in one media query?

Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

You'll only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.

iOS specific media queries

Media queries can only infer a few media features, and are designed to serve different content based on features, not brand or model.

Probably best you could do is to target the exact device-width for each device listed: someone here has already provided, as an indication, how to specifically match the iPad's dimensions.

The problem is that out of the huge range of devices out there, some feature the same dimensions (and the webkit browser — which can be inferred via hacks). All in all, CSS is even worse than JS at determining esoteric brand or OS features of the device in question.

targeting iphone4 with responsive design (css media queries) as if lower res

The iPhone 4 (and 4S) will respond to this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It's the "initial-scale" part that you're after. It will make the high res device act like it's 320px wide (or 480 in landscape).

There are other bugs around landscape orientation that you should be aware of.

Also, keep in mind that there is an orientation parameter available to media queries:

@media screen and (orientation:landscape) {
/* Landscape styles */
}

3 media queries for iphone portrait, landscape and ipad portrait

Your own attempt modified

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

---

Related Topics