HTML and CSS Reference
In-Depth Information
TAB LE 8.1
Browser Support for Responsive Design Features
BROWSER
MEDIA QUERIES
<SOURCE> MEDIA ATTRIBUTE
VIEWPORT META TAG
@VIEWPORT CSS
Opera
Since 9.5
?*
n/a**
n/a**
Firefox
Since 3.5
?*
n/a**
n/a**
Safari
Since 4
?*
n/a**
n/a**
Chrome
Since 4
?*
n/a**
n/a**
Internet Explorer
Since 9
?*
n/a**
n/a**
iOS
Since 3.2
?*
Since 3.2
No
Android
Since 2.1
?*
Since 2.1
No
Mobile Chrome
Since beta
?*
Since beta
No
Opera Mobile
Since 10
?*
Since 10.0
Since 11.0
Opera Mini
Since 5
?*
Since 6.0
No
* It was difficult to find any concrete, detailed support data for the
<source>
media attribute. But from my tests,
it seems to work well across all the latest desktop and mobile browsers.
** The Viewport meta tag and @viewport aren't relevant to nonmobile browsers.
Optimizing one site for different browsers/devices is the strategy mainly covered
in this chapter. It is arguably the best and most future-proof way of optimizing
your content for different browsers/devices. In reality, most modern sites will use
a combination of this strategy and the preceding strategy—serving different sites
to different devices—to provide a decent experience to various devices. Let's move
on and look at some groovalicious, modern web-design techniques.
