Media queries and browser scaling
Long version
I've built a responsive web design for only two devices. An example with a simplified 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 problem I am running into is that there are people in this world who increase their browser up to 150 +% in order to improve readability. This is not a problem, the page is still working correctly.
There is only one problem - the browser loads the "tablet" view on a 150 +% enlarged web browser. AFAIK this is the usual behavior, since there are fewer pixels in the viewport, the corresponding media request loads the tablet.css file, as if manually resizing the browser screen.
I would like to counter this behavior by forcing the desktop view even when zoomed in. Can anyone point me in the right direction?
TL; DR: I have RWD scaling for tablet and desktop. Downscaling the desktop by 150% = tablet view. How do I prevent my desktop tablet from viewing it when zoomed in?
Note:
- I am using the viewport meta tag
- No, it is not explained here ( http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ )
- I tried using
media="screen and (min-device-width: 1200px)
, but this option does not allow me to "check" the tablet on the desktop, as "resizing the screen" just does not work (device width = 1920px)
source to share
This will probably work. This is not something I would consider, because if the user always scales, they are used for things that don't look the same, and I don't think that matters much if your site is flexible and responsive. You will probably get FOUC.
First, enter an identifier for your stylesheets:
<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 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 download or not download, this is an example, you can remove the second one if needed:
$(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 real touch devices, but you can do a quick test by hard-coding the class in the html element:
http://jsbin.com/gamir/1/edit
source to share