1

I have a responsive web design that also supports high-DPI screens using targeted css media queries to modify content further. In general, the content displays perfectly - but I'm running into some problems relating to the browser zoom.

I was testing the application on a Microsoft Surface Pro 2 and tested the display using both IE 11 (desktop) and IE 11 (fullscreen touch).

What I found was that the desktop version of IE had a default zoom level of 150%; which is as expected because this means that the css pixel resolution is suitable for the device screen-size.

However, the fullscreen touch-friendly IE11 has a default zoom of 100%; which means that it is serving the wrong css media queries for the device size. It is easily solved by zooming to 150% manually, but many users will not know that they should do this.

I understand that browser zoom is entirely within the user/browser domain and cannot (and should not) be touched by applications. And, if it was the case that default-zoom levels were correct I wouldn't be concerned (if a tablet user wants to see the large screen layout, I'm not going to stop them).

However, I don't want users being served the wrong layout without knowing it just because a browser defaulted to the wrong zoom level.

Would a javascript triggered user notification be suitable? Or should I handle it via support knowledgebases such as an FAQ (I don't think this would work since most users wouldn't even realise that it wasn't right)? Or do I simply have to accept it for what it is and leave it alone?

Thank you for your time.

Improve this question

1 Answer 1

Reset to default
0

It will be better if you start designing according to the original resolution rather than relying on the zoom level since there won't be many windows devices out there which have a default zoom level set. For e.g HP OMni Tablet has a zoom level of 100% set by default and its resolution is 1920x1200. So your media queries might not work there.

A good strategy for doing these kind of responsive designs is to target a high level parent element with the right height using media query and then give dimension to every other child as a percentage of that.

Improve this answer
2
  • Hi, thanks for the response. Your point about relying on browser zoom is well made. I think I have a solution that is an extension of your suggestion; my design does use % widths already rather than absoluite widths but a large screen with ordinary pixel density requires a different layout to a small high-density screen (even though their pixel dimensions may be the same). So I'm going to have a separate @media query that will target high-density screens and serve a suitable layout. Thanks again.
    – user54697
    Sep 26, 2014 at 10:47
  • Glad; I could help!
    – mivaas19
    Sep 26, 2014 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.