Tom*_*zko 7 css3 media-queries
我正在建立一个响应式设计的网站.我需要区分横向模式下的平板电脑和带有媒体查询的桌面之间的布局.这些是媒体查询:
<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与平板电脑区分开来？
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"/>
没有解决问题.
我计划使用 Detectizr，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");
最终的 html 标签看起来像这样：
<html lang="en" class="js tablet ui-mobile landscape">
并使用“桌面”和“平板电脑”类来帮助造型