CSS Media Queries Woes

So, I'm re-doing the design of this website *shock*. Well, it's working in everything except mobile Safari on iOS (iPhone/iPad and iOS6/iOS7, equally). For some reason, the device renders as expected in portrait, but doesn't render as expected in landscape. This was my first real attempt at doing a somewhat complex design using em-based media queries. I'm guessing that is the culprit. I've done px-based media queries, for years. I even posted a question on stackoverflow about it.

I just realized, when viewing the website on the Windows UI version of Internet Explorer 11 (Microsoft Surface), that portrait-orientation shows the resolution as being bigger than it actually is (mobile Safari is showing it smaller than it actually is). My Surface is 1366x768, so the page should be vertical with the site links, side-by-side, at the bottom. In landscape, it should be a two-column design with the site links, vertically, to the right. Unfortunately, it shows the same, higher-resolutioned, design for portrait and landscape. I really wish browsers would simply report what is true and not their CSS pixel crap.

The whole concept is a mixed bag. Browser developers did it so that existing websites would look nice on their browser. Then website developers starting coding for that concept. Now, if my Nokia Lumia 928 actually said that the resolution was 768x1280 (which it is), then text on websites would be so small that I wouldn't be able to read it. This site would load the same layout that it does on my laptop (11.6"). So, it's a vicious cycle that someone must stop. I mean, we have phones with 1080p screens (for crying out loud). That's a higher resolution than the 110" screen in my living room (720p projector).