Load different CSS stylesheet using JavaScript reading from URL variable

I believe that the best way to approach your problem is to employ Responsive Web Design techniques. These allow you to address different resolutions appropriately.

The basic CSS looks something like the following...

@media screen and (min-width: 480px) {    // CSS for iPhone}@media screen and (min-width: 768px) {    // CSS for iPad}@media screen and (min-width: 900x) {    // CSS for desktop}

The take-away is that you won't need to load different stylesheets for different platforms. You'll have one stylesheet that works in every situation. It can even work for platforms you haven't specifically targeted.

The team the built the new Boston Globe site were my introduction to RWD. Here's a breakdown of what they did.

I tried some things with the Firebug console on your site. So, what actually worked was the following code:

<script type="text/javascript">if(window.location.href.indexOf('/?app=true') > -1) {    var fileref=document.createElement("link");    fileref.setAttribute("rel", "stylesheet");    fileref.setAttribute("type", "text/css");    fileref.setAttribute("href", "http://blog.meetcody.com/wp-content/themes/standard/appstyle.css");    document.getElementsByTagName("head")[0].appendChild(fileref);}</script>

(This code was adapted from Dynamically loading an external JavaScript or CSS file).

Since your are loading other stylesheets and I guess you overwrite their rules, you have to load this stylesheet AFTER all the others. So put this code at the end of your document or in a window.onload event.

You could also sniff out the user-agent string. This way you wouldn't have to pass anything. In most cases I wouldn't recommend it usually but with such a specific case you can safely do it without a ton of code.

// Define what "webview" isvar is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);// See if this user is coming from itif (is_uiwebview = true) {// Your code to make the <link> with a proper href// Raul's would work perfectly};

Again, as everyone else said make sure it loads things after your web-only stylesheet.Also not entirely sure the = true is needed.