Menu
I'm building a website with responsive design. I need to differentiate layout between tablet in landscape mode and desktop with media queries. These are the media queries right now:
<link href="base.css" rel="stylesheet"/>
<link href="desktop.css"
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css"
media="only screen and (min-width: 629px) and (max-width: 800px) and
(orientation:portrait),
only screen and (min-height:629px) and (max-height:800px) and
(orientation:landscape)" rel="stylesheet"/>
Problem is that desktop.css is included for tablets in landscape mode. iPad in landscape is 1024px wide, this is a resolution common for PCs. How with media queries can I differentiate 1000px wide dekstop from a tablet in landscape mode?
P.S. I have to use media queries becasue the website will be cached/CDNed and so on. Any server side detection won't work.
P.S.2.
<link href="desktop.css"
media="only screen and (min-width: 801px),
not only screen and (min-height:629px) and (max-height:800px) and
(orientation:landscape)" rel="stylesheet"/>
doesn't fix the issue.
213
I plan to use Detectizr, a plugin for Modernizr
https://github.com/barisaydinoglu/Detectizr
E.g.
// adds html class: 'desktop', 'tablet' or 'mobile' to aid styling
Modernizr.Detectizr.detect({ detectDeviceModel: false, detectScreen: false, detectOS: false, detectBrowser: false, detectPlugins: false });
// hack: for some reason, modernizr is chopping off the 'mobile' part off the 'ui-mobile' class needed by jquery mobile
$("html").removeClass("ui-");
$("html").addClass("ui-mobile");
Ending up with a html tag looking something like this:
<html lang="en" class="js tablet ui-mobile landscape">
And the use the classes 'desktop' and 'tablet' to aid styling
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
