CODEWITHSUNDEEP
htmlcsstablet
Gareth
Gareth

Reputation: 223

Targeting a tablet without using media queries

I'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.

Is there any way to target the tablet to turn the filter off without touching the media queries?

Thanks in advance

The website in question is www.garethjweaver.com

Upvotes: 1

Views: 139

Answers (2)

Chris Spittles
Chris Spittles

Reputation: 15359

Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.

http://blog.mobileesp.com/

The method most pertaining to what you want to achieve is:

MobileEsp.DetectTierTablet();

It also allows you to pick specific groups of tablets by OS:

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

A possible usage scenario:

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

The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:

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

It also has other versions for ASP.NET and PHP so you can do the detection server side.

Here's a fiddle illustrating the functionality outlined above:

Fiddle

Upvotes: 1

chengmu
chengmu

Reputation: 21

I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by @media (orientation: landscape) { ... }

You want to determine if it's a landscape view..right?

about other usages of media query MDN:media query

if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.

Hope my answer helps..:)

Upvotes: 0

Related Questions