Custom stylesheet / css per profile or device

0
Hi, I have an application with a desktop, tablet and phone options. Does anyone know how I can load a different css per device? I now have a work around that checks the width of the browser and then loads a different stylesheet via a media query in my index.html <!-- Mobile Stylesheet --> <link rel="stylesheet" media="only screen and (max-width: 480px)" href="css/mobile.css" /> <!-- Tablet Stylesheet --> <link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 900px)" href="css/mobile.css" /> <!-- Desktop Stylesheet --> <link rel="stylesheet" media="only screen and (min-width: 901px)" href="css/theme.css" /> But this also calls the mobile.css when I resize my desktop application to <480px. Hope someone can help me out, thanks in advance! Jeroen
asked
2 answers
2

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/.

answered
2

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.

answered