0

Grabbing this "loadcssfile" from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml and added the check device.

This is the best I have and I may just be entirly confused! I want to change the CSS file depending on the device before the rest of the page loads.

function checkDevice(){
    if(window.isiPad){
        // do nothing
    } else {        
        loadcssfile(desktop.css, css);
    }
}

function loadcssfile(filename, filetype){
 if (isset(filename)){ //if filename is set
  var fileref=document.createElement('link');
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type","text/css");
  fileref.setAttribute("src", filename);
 }
}

Any ideas?

2
Contributors
6
Replies
8
Views
4 Years
Discussion Span
Last Post by wolfgangcs
0

you could try this to detect the browser.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 // some code..
}
0

Great thanks! What is the condition it is looking for with all of those in the same line?
(If any of these)?

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )

Original question: How can I change the CSS file after detection?

0

yup, it searches for which one it is.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    loadcssfile(ipad.css, css);
}
0

I see what I was doing wrong. The .css file is in another folder. I needed to add the dir to the <link>.

fileref.setAttribute("src", "assets/includes/".filename);

how can I add ?v=1 to the end of the filename?

fileref.setAttribute("src", "assets/includes/".filename. "?v=1");

doesn't seem to fly.

0

<---With your addition of mobile/device detection--->
Do I do it like this?

if( /iPad/i.test(navigator.userAgent) ) {
        loadcssfile(ipad.css, css);
    }else if(/iPhone/i.test(navigator.userAgent)){
        loadcssfile(iphone.css, css);
    }else if(/Android/i.test(navigator.userAgent)){
        loadcssfile(android.css, css);
    }
    loadcssfile(desktop.css, css);
}
0

I am wanting a line to be added to the <head> tag in my html file as:

<link type="text/css" rel="stylesheet" href="assets/includes/iphone.css?v=1" />

or whatever .css file needed. ideas?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.