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.