问题描述
我正在建立一个具有自适应设计的网站。我需要区分平板电脑在横向模式和桌面与媒体查询之间的布局。现在是媒体查询：
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"/>
问题是包括 desktop.css 适用于横向模式的平板电脑。 iPad在横向是 1024px 宽，这是一个常见的电脑的解决方案。如何使用媒体查询功能在横向模式下从平板电脑中区分 1000px wide dekstop？
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?
我必须使用媒体查询，因为网站将被缓存/ CDNed等。任何服务器端检测都将无法正常工作。
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"/>
无法解决问题。
推荐答案
我打算使用Detectizr，Modernizr插件
I plan to use Detectizr, a plugin for Modernizr
例如
// 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标签，看起来像这样：
Ending up with a html tag looking something like this:
<html lang="en" class="js tablet ui-mobile landscape">
并使用类'desktop'和'tablet'来辅助造型
And the use the classes 'desktop' and 'tablet' to aid styling
这篇关于媒体查询，以横向模式区分桌面和iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！