Now, with the use of max-width, this media query will apply only to
browser or screen widths with a maximum width of 600 pixels or narrower.
While the above min-width and max-width can apply to either screen
size or browser width, sometimes we’d like a media query that is relevant to
device width specifically. This means that even if a browser or other viewing
area is minimized to something smaller, the media query would still apply
to the size of the actual device. The min-device-width and max-device-
width media query properties are great for targeting certain devices with
set dimensions, without applying the same styles to other screen sizes in a
browser that mimics the device’s size.
1 @media screen and (max-device-width: 480px) {(^2) .classForiPhoneDisplay {
(^3) font-size: 1.2em;
(^4) }
5 }
1 @media screen and (min-device-width: 768px) {
(^2) .minimumiPadWidth {
(^3) clear: both;
(^4) margin-bottom: 2px solid #ccc;
(^5) }
6 }
There are also other tricks with media queries to target specific devices.
Thomas Maier has written two short snippets and explanations for
targeting the iPhone and iPad only:
- CSS for iPhone 4 (Retina display)
- How To: CSS for the iPad