Media query to differentiate desktop from iPad in

2020-07-10 09:46发布

站内文章 / HTML/CSS
74 0 0

问题:

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.

回答1:

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



标签： css media-queries
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~