Question

我正在建立一个响应式设计的网站。我需要区分横向模式下的平板电脑和带有媒体查询的桌面之间的布局。这些是媒体查询：

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

问题是横向模式下的平板电脑包含desktop.css。风景中的iPad宽1024px，这是PC的常见解决方案。如何通过媒体查询在横向模式下区分1000px宽dekstop与平板电脑？

P.S。我必须使用媒体查询，因为网站将被缓存/ CDNed等。任何服务器端检测都不起作用。

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

无法解决问题。

Answer 1

我打算使用Detectizr，这是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");

使用html标记结束，看起来像这样：

<html lang="en" class="js tablet ui-mobile    landscape">

使用类“桌面”和“平板电脑”来辅助样式

媒体查询以横向模式区分桌面和iPad

1 个答案: