Media queries and browser zoom

Question

Long version

I've built a responsive webdesign for just two devices. Simplied example:

<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1199px)" href="tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="wide.css" />

This works as intended, on all major browsers, tablets (built with Bootstrap 3). The only issue that I have is that there are still people in this world that zoom their browser to 150+% in order to increase readability. This is not an issue, the page still works properly.

There is just one issue - the browser loads the "tablet" view on a 150+% zoomed in webbrowser. AFAIK this is normal behaviour, since there are less pixels available in the viewport, the appropriate media query loads the tablet.css file, just like when you resize the browser screen manually.

I'd like to counter this behaviour by forcing the desktop view, even when zoomed in. Can anyone point me in the right direction?

TLDR: I've got a RWD scaling for tablet and desktop. Desktop browser zoom 150% = tablet view. How to prevent tablet view for desktop when zoomed in?

Note:

I'm using the viewport meta tag
No, this is not the issue explained here (http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/)
I've tried using media="screen and (min-device-width: 1200px) but that option renders me unable to 'test' the tablet-view on desktop since 'resizing' a screen simply doesn't work (device width = 1920px)

I wouldn't change normal behavior, but first start with sniffing out the zoom, http://stackoverflow.com/a/6365777/1004312, then -- if that is working -- I guess write a script to load up a desktop css file that doesn't have media queries. Just guessing. — Christina, Aug 08 '14 at 12:15
Actually this would work: Use server side detection, such as load up responsive css and the viewport meta tag on a mobile (phone and tables) devices and load up a fluid, but not responsive, css file on a desktop device. This would be the easiest: http://mobiledetect.net/ — Christina, Aug 08 '14 at 12:18
@BootstrapThemer I jst tried that, but that excluded other devices (high density and high end tablets). The issue is that I can't use server side detection (backing system in Sharepoint 2013 on-premises - if you don't know it, there's little custom coding possible when it comes to these things - I have to find a css/js-only solution that works for desktop browsers only). Thanks for the ideas though. — Erik J., Aug 08 '14 at 12:57

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

This will probably work. It's not something I would consider doing because if a user is always zoomed, they are used to things not looking the same and I don't think it's a big deal if your site is fluid and responsive. You will probably get FOUC.

First make an id for your style sheets:

<link id="responsivecss" href="responsive.css" rel="stylesheet" type="text/css" />
<link id="desktopcss" href="desktop.css" rel="stylesheet" type="text/css" />

Use a script to detect touch and no-touch. It's worked for me on Android, IOS, and Windows.

/* __________________ SUPPORTS TOUCH OR NOT  __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        };
    } else {
        d.className += " no-touch";
        return {
            touch: false
        };
    }
})();

Then load or not load, this is an example, you can remove the second if, if not necessary:

$(document).ready(function () {
    if ($('html').hasClass('touch')) { 
      $('#desktopcss').prop('disabled',true);
    }
      if ($('html').hasClass('no-touch')) { 
      $('#responsivecss').prop('disabled',true);
    }

});

Quick demo, I haven't tested actual touch devices, but you can do a quick test by hard coding the class on the html element:

http://jsbin.com/gamir/1/edit

Thanks @BootstrapThemer - I'll give this a try and get back here (probably after my weekend). Thanks again! — Erik J., Aug 08 '14 at 15:14

Media queries and browser zoom

1 Answers1

http://jsbin.com/gamir/1/edit