在不使用媒体查询的情况下定位平板电脑答案

【问题标题】：Targeting a tablet without using media queries在不使用媒体查询的情况下定位平板电脑
【发布时间】：2014-03-04 07:34:16
【问题描述】：

我只是想知道是否可以在不使用媒体查询的情况下定位平板电脑。我问这个的原因是我已经在使用媒体查询，但是我有桌面上的灰度图像，当悬停时它们会变成原始颜色。当设备达到一定尺寸时，我已经删除了灰度，因此它在较小的平板电脑和手机上很好，但对于 ipad 和某些平板电脑来说，当它们是横向的时，它有点太小了。

有没有办法让平板电脑在不接触媒体查询的情况下关闭过滤器？

提前致谢

有问题的网站是www.garethjweaver.com

【问题讨论】：

标签： html css tablet

【解决方案1】：

看看 Mobile ESP 框架；特别是 JavaScript 之一。它可以检测单个设备或设备组，例如平板电脑。

http://blog.mobileesp.com/

与您想要实现的目标最相关的方法是：

MobileEsp.DetectTierTablet();

它还允许您按操作系统选择特定的平板电脑组：

MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();

一个可能的使用场景：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
    $(function() {

        if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true

            $("html").addClass("isTablet"); // this will add the isTablet class to the HTML element

        }    
    });
<script>

上面的示例使用jQuery，如果您开始使用 JavaScript，这将使您的事情变得更容易。有了这些，您只需在样式表中为您的平板电脑设置规则，如下所示：

<style>
    body {
        max-width: 1200px;
    }
    .isTablet body {
        max-width: 100%;
    }
</style>

它还有其他版本的 ASP.NET 和 PHP，所以你可以做检测服务器端。

这是一个说明上述功能的小提琴：

Fiddle

【讨论】：

好的，谢谢，我会看看，虽然我是一个完全的 javascript 新手，所以我很可能很快就会问更多关于这个的问题
本站有很多使用场景可以复制粘贴。本质上，您可以在“isTablet”页面的 HTML 元素上设置一个 CSS 类，然后在任何特定于平板电脑的样式前面加上该类。
因此，例如，可以用 .isTablet.grayscale{filter:none;} 代替 .isTablet body {max-width:100%;}。这行得通吗？
我尝试了上面的方法，但没有成功，你现在可以在网站上看到代码。我没有下载MobileESP，只是将链接放在脚本src中。我有一种不对劲的感觉，我可能需要为它制作一个 .js 页面？但后来我看看你的小提琴，你所做的只是使用我使用的链接
当我把它放在小提琴 (jsfiddle.net/garethweaver/txb9T) 中时它确实有效，这很奇怪，所以我一定是代码错了？？

【解决方案2】：

我知道您不想触摸媒体查询，但据我所知，您的问题可以通过以下方式解决 @media (orientation: landscape) { ... }

您想确定它是否是横向视图..对吗？

关于媒体查询MDN:media query的其他用法

如果你真的不想碰它，还有另一种选择是使用 javascript。但我认为这会使事情变得更加复杂。

希望我的回答有帮助..:)

【讨论】：