Media query to differentiate desktop from iPad in landscape mode

2018-06-20 00:07:29

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?

PS I have to use media queries becasue the website will be cached/CDNed and so on. Any server side detection won't work.

PS2.

<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.

I plan to use Detectizr, a plugin for Modernizr

https://github.com/barisaydinoglu/Detectizr

// 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

链接地址: http://www.djcxy.com/p/56276.html

上一篇: PHP测试致命错误

下一篇: 媒体查询以横向模式区分桌面与iPad