HTML and CSS Reference
In-Depth Information
In this case you may want to select based on the monitor size rather
than the window size:
@media screen and (min-width: 640px and device-aspect-ratio: 16/9 ) { }
@media screen and (min-width: 640px and device-aspect-ratio: 4/3 ) { }
device-aspect-ratio: always matches the monitor, regardless of the
window size.
Additional device-detection features
Media queries can be used for more than just screen sizes. There are
several other features for detection in the spec, and various browser
vendors are introducing more as they add functionality to their brows-
ers. Here are some of the more interesting ones:
color —Select rules based on the number of bits available per color
channel, where 8 bits is 255 levels per color. If you can remember the
days of web-safe colors, this feature lets you work around the pixela-
tion issues that web-safe colors avoided. Devices that have limited
color support can be given a more constrained set of background
resolution —Select rules based on the dots per inch (dpi) of the dis-
play. A display with high dpi renders fonts more readably, so you
can use a smaller font size.
touch-enabled —This is currently a Mobile Firefox-only feature.
Select rules based on whether the display is a touch input device,
perhaps to give buttons and links more finger space.
device-pixel-ratio —Currently a Mobile Safari-only feature. Select
rules based on the zoom level, perhaps to provide a higher-resolution
background image as the user zooms in so the image remains crisp
and sharp.
Can you really make a mobile website with just CSS?
Is it possible to make your website deal with a full range of mobile devices and
desktop PCs just by fiddling with CSS? As with most things, the answer is, “it
Search WWH ::

Custom Search