在不使用媒体查询的情况下瞄准平板电脑

Question

我只是想知道，在不使用媒体查询的情况下，是否有可能瞄准平板电脑。我问这个问题的原因是我已经使用了媒体查询，但是我在桌面上有一些灰度图像，当它们悬停时，它们会改变到原来的颜色。当设备达到一定尺寸时，我已经去掉了灰度，所以在较小的平板电脑和手机上是可以的，但是对于ipad和某些平板电脑来说，当它们被美化的时候，它就太小了。

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

提前感谢

所讨论的网站是www.garethjweaver.com

Answer 1

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

http://blog.mobileesp.com/

与您希望实现的目标最相关的方法是：

MobileEsp.DetectTierTablet();

它还允许您通过OS选择特定的平板电脑组：

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提供了其他版本，因此您可以在检测服务器端进行操作。

这里有一个小提琴，说明了上面概述的功能：

小提琴

Answer 2

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

你想确定它是否是景观view..right？

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

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

希望我的回答有所帮助。)