How Do I Css Style Differently Between IPad And IPhone
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 */
@media only screen and (max-device-width : 1024px) {
body {background-color:#ff8888;}
}
/* iphone - GREEN */
@media only 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) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only 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:
@media only screen and (min-device-width:481px) and (max-device-width : 1024px) {
body {background-color:#ff8888;
}
Post a Comment for "How Do I Css Style Differently Between IPad And IPhone"