HTML and CSS Reference
In-Depth Information
MEDIA
QUERY
POLYFILLS
One problem with Mobile First is that browsers that don't support media que-
ries will get a mobile layout rather than a desktop layout. To fix this, you could
include a JavaScript polyfill in your page. The two worth checking out are
css3-mediaqueries.js (
http://code.google.com/p/css3-mediaqueries-js)
and
respond.js (
https://github.com/scottjehl/Respond).
Both work in the same sort of
way. You just include the JavaScript in your page after the CSS declarations. All my
responsive examples from number 4 (media-blitz-4-mobile-first.html) on include
the following:
<script src=”respond.min.js”></script>
In terms of which one to use, css3-mediaqueries.js is larger in size but more
robust, whereas respond.js works only on
width
/
height
media queries.
FLASH
: RESPONSIVE
SHORTCOMINGS
Although the media query polyfills work well, one glaring problem is that
the video fallback that comes into play when the Media Blitz example is
loaded in IE6-8 is, well, Flash. When Flash is loaded into a browser, the
browser allocates some space for it and then hands control of that space
over to the Flash Player; the resulting content doesn't play nicely with web
standards.
The Flash movie therefore can't be reduced in size or otherwise manipulated
using CSS (
width
,
max-width
, etc.), so the Flash video will stay the same size
regardless of how the size of the rest of the page around it changes. In a
responsive design, when the screen width gets too narrow, the layout will
start to look horrible as the Flash movie stomps all over it.
Therefore, I've set my Flash Player fallback to a bit smaller than the HTML5
<video>
equivalent and set the
<body>
element to a fixed width of 1024px
inside one of my IE conditional comments so that the design is now fixed,
eliminating the problem. It's not perfect, but think of it this way: Users of IE
won't be using a narrow-screen device anyway, and at least they get a layout
they can use.
