1

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.

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.

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.

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.

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).

Would I have been better off targeting resolution from the start or would this not have made any difference?

I would appreciate others thought son this and perhaps even a solution!

Thanks

e-sushi
  • 13,786
  • 10
  • 38
  • 57
DJC
  • 1,175
  • 1
  • 15
  • 39
  • shorten your question and demonstrate your problem. – Richa Feb 25 '14 at 09:51
  • 2
    IE doesn't have 125% as a default zoom so it will not be a problem for you. And even so, you shouldn't adjust your site according to that, as people who do zoom do that to make the site's content larger, as they might have difficult to see it otherwise – Asons Feb 25 '14 at 09:53
  • when I hit cntrl+0 to reset, it sets to 125% though – DJC Feb 25 '14 at 09:55
  • @user2933231 Did you check the IE settings? You've probably got default zoom (re)configured at 125%. – e-sushi Feb 25 '14 at 09:57
  • Here is how you change those settings: http://social.technet.microsoft.com/Forums/ie/en-US/5571c0cc-ffad-4c0f-8669-8c678a3794f0/how-to-set-default-zoom-level-in-ie9?forum=ieitprocurrentver – Asons Feb 25 '14 at 09:58
  • ok but I'm more concerned that other people will load the site inIE and their defualt zoom will be 125%. This is IE 10 - I didn't everchange the default settings, so it came as 125% – DJC Feb 25 '14 at 09:59
  • First rule of the web is users do whatever they want (often because they need it). Your site should display reasonably the same way on most major versions of major browsers. Then, when zoomed up to 200%, it should still display information to users. Not with the same design, not exactly like in 100% obviously but text in white shouldn't suddenly display on white background or `overflow: hidden` and `height: NNNpx` shouldn't cut information in half and hide the rest... (pro-tip don't use height and absolute positioning). Forget your design, it just needs to be **readable** – FelipeAls Feb 25 '14 at 10:01
  • Don't be concerned about that. You can't do anything about it anyway. Follow FelipeAls advice and everything will be fine. – Asons Feb 25 '14 at 10:05

1 Answers1

2

Try to include viewport meta tag in the head of your document like: 

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • http://stackoverflow.com/questions/10892463/how-is-the-meta-viewport-tag-used-and-what-does-it-do – Alvaro Menéndez Feb 25 '14 at 09:59
  • thanks for this - I still can't get it to make any difference but seems like you've pointed me in the right direction – DJC Feb 25 '14 at 17:18