I had a look into this a bit and I came across this library https://github.com/borismus/device.js I believe this should do what you want. Alternatively you could look at the user agent to detect which device the user is on. This website was quite useful: http://www.html5rocks.com/en/mobile/cross-device/.
Isn't there a profile-phone, profile-desktop etc. appended to the body class? That would be my bet to identify which css to use.
Example: go to index.html, Mendix will identify that I'm using a phone and add profile-phone as class to the body of index.html
This way, if you structure your CSS to start with .profile-phone .yourclass only those classes with .profile-phone as starting class will be applied.
Edit: after a second read of your post.. Above mentioned answer does not prevent all stylesheets from being loaded. If you have a phone.css, tablet.css, web.css, all three will still be loaded.