title: CSS issue with browser default zoom
body: <p>Morning. I have a site that runs a media query for MIN WIDTH (ie browser window size), on stylesheet runs when the width is 1024px and below, the other when 1025 and above. I found it difficut to get my head around which one to focus on - screen size, window size or resolution, but this is what I went for and so far it has worked well. I also use respond.js to ensure IE8 and earlier actually run a stylesheet.</p>
  
  <p>Chrome, FF and IE all display the site correctly on all the desktop machines I have tried, and chrome displays perfectly on my 11.6inch laptop, yet FF and IE 10 display the site as much larger than it should be, meaning a horizontal scrollbar appears. </p>
  
  <p>I noticed that the default zoom level for IE is 125% - if I set it to 100%, my site displays as it does in chrome. It seems whilst on this higher zoom, browser window size is calculated wrong, as it must be resized far far more in order to change between stylesheets.</p>
  
  <p>My question - I appreciate that having different stylesheets for every browser is not efficient, and perhaps shows bad code. However, is there another way? If I make the whole lot smaller, it will look tiny in Chrome.</p>
  
  <p>Or should I bother at all? Is this an issue that firefox/IE users have often and simply zoom out? As I said, it is only on my laptop (though I'm sure many small screens may produce the same results) and displays well on all browsers on my two desktop machines (20inch widescreen and 17inch square).</p>
  
  <p>Would I have been better off targeting resolution from the start or would this not have made any difference? </p>
  
  <p>I would appreciate others thought son this and perhaps even a solution!</p>
  
  <p>Thanks</p>