Hi,
I’m using media queries to deliver different versions of the site to different monitor resolutions/device. It’s working fine so far, except when I resize the screen to the smallest resolution, the design changes, but it’s all messed up (like it doesn’t load the handheld stylesheet). If I reload (while the screen is small), the handheld style kicks in as expected, and it all works great. Here’s my code:
<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="/large.css" media="screen and (min-width: 1501px)" />
<link rel="stylesheet" type="text/css" href="/medium.css" media="screen and (min-width: 1025px) and (max-width: 1500px)" />
<link rel="stylesheet" type="text/css" href="/small.css" media="screen and (min-width: 715px) and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld and (max-width: 714px), screen and (max-device-width: 714px), screen and (max-width: 714px)" />
<!--<![endif]-->
I’m using javascript for IE 8 and less (IE 9 is supposed to support them), and the javascript actually works better. It’s part of a Wordpress theme.
Can you see something wrong with my media queries?
Could it be because I’m using Javascript extensively on this site (jQuery for a variety of effects)?
How come it’s not loading handheld right away, and only after a reload?
Thanks