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

2018-06-20 00:07:28

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

<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像素，这是个人电脑普遍使用的解决方案。我如何与媒体查询可以分化1000px宽dekstop从横向模式平板电脑吗？

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

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

没有解决这个问题。

我打算使用Modernizr的插件Detectizr

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");

结束一个html标签看起来像这样：

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

并且使用班级的“桌面”和“平板电脑”来辅助造型

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

上一篇: Media query to differentiate desktop from iPad in landscape mode

下一篇: Msiexec: automatic rollback to previous version on installation failure