Handheld iPhone Android Specific CSS not working at all

I am trying to create specific CSS for handheld devices, and I feel like I've tried every way possible with no effect.

The reason I need to do this is so that handheld devices to not use fancybox but instead open the link in a new tab.

To do this in the div there are 2 UL's, each with a class (screen & handheld).

I want the handheld ul to be hidden on desktops and the screen ul to be hidden on handhelds which should be working using display: none on each.

To get the device specific CSS to work I've tried using seperate css files in the HTML header such as:

<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />

<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />

or, within the master.css file:

@media only screen and (max-device-width: 640px) {

    .screen { display: none !important; }

    }

but this does not work. Android always seems to use the UL that includes the fancybox class and thus loads up fancybox every time.

I've tried it in multiple Android browsers (Opera, stock and Dolphin).

Any ideas would be much appreciated!

Thanks