Grabbing this "loadcssfile" from 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(){
        // 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("src", filename);

Any ideas?

Recommended Answers

All 6 Replies

you could try this to detect the browser.

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

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?

yup, it searches for which one it is.

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

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.

<---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);

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.