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

Question

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

有没有什么方法可以让平板电脑在不触及媒体查询的情况下关闭过滤器？

提前致谢

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

Answer 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 :

Fiddle