How Do I Css Style Differently Between Ipad And Iphone

I've got an embedded HTML file that I'm using for the help pages within my iOS app but want to style some things differently when displayed differently on iPad and iPhone. Having

Solution 1:

The C in CSS stands for 'cascading'. Your iPad styles are overwriting your iPhone styles. Try switching them around like this:

/* ipad  - PINK */@mediaonly screen and (max-device-width : 1024px) {
    body {background-color:#ff8888;} 
}

/* iphone - GREEN */@mediaonly screen and (max-device-width : 480px) {
    body {background-color:#009900;}
}

How wide is the iPhone viewport? 480px?

In your code, you're first checking if the device width is <=480. This returns true, so the enclosed styles are applied. Then, your code checks if the device width is <=1024. 480 is indeed less than 1024, so the enclosed styles are applied.

Solution 2:

It is better not to use the max-device-width property by itself. Use it together with other properties like min-device-width to target devices accurately.

It is sometimes confusing, but to understand things better, the base property specified by W3C is device-width which is the Width of the device screen (not the browser width)

min and max are prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML.

In other words, device-width queries and returns the devices width as one number, but using min and max does not return two fixed numbers representing the devices minimum and maximum widths but rather allows you to check if device-width is less than or greater than a value you choose.

So in your case both sets will apply to the iPhone as the order will mean iPhone device width will always be less than 1024 and 480.

Although switching the order of your sets would work as @JezenThomas' solution I recommend you try these Hardboiled CSS media queries:

/* Smartphones (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */@mediaonly screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */@mediaonly screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */@mediaonly screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */@mediaonly screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Solution 3:

You could try something along these lines:

@mediaonly screen and (min-device-width:481px) and (max-device-width : 1024px) {
        body {background-color:#ff8888;
}