How to target tablet devices with CSS queries


Tags: html,css

Problem :

I am trying to target tablets with a own css however I do not get it to work. I know there is a way to target iPad specifically but are there no better ways? I want to target Android tablets too but phones such as Samsung Nexus are misinterpreted as a tablet in the way I am doing it now.



Solution :

you need to use different style sheets according to device resolution

<link rel="stylesheet" media="all" href="style.css">
<link rel="stylesheet" media="screen and (max-device-width: 320px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 641px) and (max-width: 800px)" href="tablet.css">

    CSS Howto..

    How do I get the background image to not repeat and take up the entire section?

    How to reverse a jQuery animation back to original CSS properties

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to center the buttons and make them same size

    How to create text block on image using just CSS

    How to force thumbnails to overflow right and not below

    How to adapt a flex div's width to content

    How to stop an image shrinking on responsive site whilst also keeping it centred

    How can I “cloak” my Javascript and CSS files using PHP?

    How to CSS for today's Internet? [closed]

    How to css 3rd li in hierarchy?

    How to build a complex table by using CSS?

    How to space the children of a div with css?

    CSS classes: base+additional. How to define?

    Pure CSS3 slideshow repeats the last 4 slides?

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to center right-aligned numbers in table column using CSS?

    How do I make effect like this on image hover?

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How to build HTML email using CSS?

    How do I iterate through array and set classes individually?

    How to replace a specific text in CSS? [duplicate]

    How to apply CSS width to a submit input on Firefox?

    How to reset a css animation class using jquery?

    How to control the appearance of a widget on client web sites CSS

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    how to bring ul element to the center of the div? CSS

    How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

    How to strach div in some line to “all left space” with css

    How can I add interactive content to a Bootstrap popover?