CODEWITHSUNDEEP
meteor
snort
snort

Reputation: 2485

What's the right way to use different styles/scripts in Meteor depending on browser

I'm using Meteor to build a site that has different CSS and scripts (jquery mobile) for mobile devices than it does for desktop browsers. I'd like to be able to conditionally include these in the head element based on the user agent. I'm sure this can all be dynamically injected into the DOM, but is there a Meteor best practice for this kind of thing?

Upvotes: 1

Views: 190

Answers (2)

Hubert OG
Hubert OG

Reputation: 19544

See this question: Excluding bootstrap from specific routes in Meteor . A similar approach may be used to achieve what you need.

Also, be aware of CSS @media command, it is commonly used to differentiate mobile styles.

@media only screen and (max-width:500px) {
    ...
}

Upvotes: 0

nate-strauser
nate-strauser

Reputation: 2803

i would suggest adding a browser specific class to the body element like so (client/lib/environment.js):

if(navigator.userAgent.indexOf("Trident/4")>-1)
    $("body").addClass("ie8");

i use less and then just have an ie8.less file like so:

.ie8{
//override normal styles here - may have to use !important
}

this doesnt meet your goal of only loading what's applicable to each client, but it does fit the bill for browser specific styles

if your files are externally stored and you are using meteorite, you could maybe use this https://atmosphere.meteor.com/package/external-file-loader to detect and then load the needed scripts

however, if you store your files in your meteor app, they've probably already been combined and sent to the browser

Upvotes: 2

Related Questions