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.

1

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.

  • 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. – Marvin Sep 26 '14 at 10:47
  • Glad; I could help! – mivaas19 Sep 26 '14 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.