Menu
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 read a bunch I've learned about the @media syntax and all but for the life of me I can't get it to work properly. Given the HTML file shown below, why does it ALWAYS just show the iPad styled background (pink) instead of adjusting based on device?
<head>
<title>Help</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;}
/* iphone - GREEN */
@media only screen and (max-device-width : 480px) {
body {background-color:#009900;}
}
/* ipad - PINK */
@media only screen and (max-device-width : 1024px) {
body {background-color:#ff8888;}
}
</style>
</head>
<body>
<br>
<h1> I Need Some Help!</h1>
</body>
806
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.
159
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
