I have tried the different combinations of width
& device-width
but on the iPhone in landscape this code never turns the background red;
I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query
This is what I would like 3 different media queries which target:
- both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
- width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
- width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.
Note this is for a HTML email so its not possible to use JS.
@media only screen and (max-width: 640px) {
body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
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;
}
}