2 CSS files, 1 for mobile and 1 for computers [duplicate]

Question

I have 2 CSS files, 1 for mobile devices and 1 for computers, laptops.. See below:

http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css

Is it posible to load tablet.css only on mobile devices, and not when a user make his screen smaller on a computer.

Code below didnt work for me :

<link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css" type="text/css" media="Screen" />
        <link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css" type="text/css" media="handheld" />

Any ideas?

Thanks!

Answer 1

try this

<link id="stylesheet-tablet" media="(min-width: 480px) and (max-width: 979px)" href="tablet.css" type="text/css" rel="stylesheet">
<link id="stylesheet-mobile" media="(min-width: 0px) and (max-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet">

and use this meta tag

<meta name="viewport" content="width=device-width, height=device-height" />