0

I want to link to a certain stylesheet for mobile devices, and another for desktop, because with the pixel density/ large size of some of the handsets coming out now, using media queries does not always encompass all handsets like I want it to.

I want to run the following javascript:

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

But I need some code.. to be an html link tag

I do not know much javascript, so any help is appreciated.

RobG
  • 124,520
  • 28
  • 153
  • 188
Hunter
  • 408
  • 1
  • 3
  • 14
  • Are you looking for JavaScript code to insert that will add html to the page? If so can you provide a sample of the html you want to add. – Jason Aller Apr 02 '14 at 03:26
  • 2
    Using the user agent string to identify the device is also seriously flawed. Aren't media queries designed for exactly this case? (add media–query tag) – RobG Apr 02 '14 at 04:16
  • "because with the pixel density/ large size of some of the handsets coming out now" Says who? Aren't media queries based on Pixel Width x Pixel Height? So no matter the size of the screen it will always adjust? – snowYetis Jan 22 '15 at 20:41

3 Answers3

3

You can use document.write

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 document.write('<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=884f021ebd40">');
}

Make sure you place the code where you want to include the css.

Please note that it has some drawbacks

Community
  • 1
  • 1
ysrb
  • 6,563
  • 2
  • 27
  • 29
  • Ok, great, I'm not really a javascript kind of guy, and for this project its basically the only place I'll use it, so I think it'll do it. Thanks @ysrb especially for being patient with my lack of knowledge on javascript! – Hunter Apr 02 '14 at 03:30
2

Using plain JavaScript, you can insert a stylesheet in the head if your mobile user agent regex evaluates to true like so:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
    link=document.createElement('link');
    link.href='put your URL here';
    link.rel='stylesheet';
    document.getElementsByTagName('head')[0].appendChild(link);
}
Alex W
  • 33,401
  • 9
  • 92
  • 97
1

Jquery:

$(document.append( /* your link here */ );

Native JS:

document.getElementById('some-target').innerHTML = /* your link here */;

As an alternative to ysrb's answer:

var link = document.createElement('link'); link.type='text/css'; link.href='your.css'; link.rel='stylesheet'; document.getElementsByTagName('head')[0].appendChild(link);

ioseph
  • 1,813
  • 17
  • 22
  • So on the Native JS one, what would be some-target, and what would be my link in the your link here? Which would be the link to my css file in the head of my document? – Hunter Apr 02 '14 at 03:31
  • Sorry, misread your question and thought you meant an anchor tag, edited answer. – ioseph Apr 02 '14 at 03:37
  • Ok well I have on for you, is there any way to do this in a media query in my css? Or should I open a new thread? @ioseph – Hunter Apr 02 '14 at 03:41