Differentiating between portrait mode on handheld devices and desktops

Question

I'm looking for a reliable media query rule that is:

If desktop width < 720px AND devices in portrait mode {}

(that is, as the width decreases on desktop, the media query kicks in at 720px. On phones, this should only happen when it is in portrait mode - landscape should not have the media query applied)

---

The problem is: how to target devices separately from desktops.

Problem exists because: @media handheld is not supported

Additionally max-width effects everything, so it can't be used in conjunction with max-device-width AND portrait

---

Seems like I can only target either:

1. all devices bellow/between set widths
2. only devices (using a JavaScript shim to fix media queries) bellow/between set widths and orientation.

CANNOT treat devices and desktops separately.

Is there an existing JavaScript solution which would fulfill my needs?

note I am coding my CSS in LESS, the media queries are nested within.

---

Background

The site I am working on is responsive and uses a grid system. At 720px width (current testing width) column usage changes for smaller devices / resolutions. Upon testing, however, the site (full site at 720px width) was pleasantly readable in landscape, even on my small screen HTC Desire. As I am removing portions of the site for better usability with media queries, I thought why not have the site normally accessible in landscape.

Bellow 720px on a desktop without modifying element column spans sees a pretty crushed site. However, due to the smaller nature of a mobile device it doesn't appear so. However with the column span modifications, particular elements are simply out of proportion (such as the heading) when it comes to landscape on a phone (due to the much reduced height of the browser).

Simply put, changing the design purely on browser width doesn't carry across all devices equally, as I have managed to achieve on other sites.

I am using the following meta tag:

<meta  name="viewport"  content="width=device-width, 
    initial-scale=1, 
    maximum-scale=1, 
    user-scalable=no" />

---

What's been tried

Orientation is irrelevant on desktops. It changes depending on user window settings, resolution, etc etc.

I have tried the following to target phones/both:

@media handheld and (orientation:portrait) { }

No phones it seems take advantage of the handheld attribute, at least, 100% do not - so it's worthless.

@media screen and (max-device-width:720px) and (orientation:portrait)  { }

Would work great, but android 2.2 and 2.3 (possibly others, not to mention other OS?) have issues with max-device-width not working.

@media screen and (max-width:720px) and (orientation:portrait)  { }

Works on high res monitors (since height quickly becomes > width as you decrease width of the window) and phones, but wont work on smaller monitors, as the windows wont be portrait at 720px width (site keeps condensing past the limits I want).

@media screen and (max-width:720px), screen and (orientation:portrait)  { }

Will do whatever comes first. No use.

@media screen and (max-width:720px), screen and (max-width:500px) and (orientation:portrait) { }

and

@media screen and (max-width:720px) { }
@media screen and (max-width:500px) and (orientation:portrait)  { }

Everything simply uses the larger max-width.

I've also had a fiddle with min/max-height with no success either.