Detect if mobile - if yes use java01.js , if not mobile use java02.js

Question

Complete beginner (hobbyist) here so this is probably a total noob question.

I have two javascripts. One is for mobile users, other is for desktop users.

Right now I have in my html:

<script type="text/javascript" 
src="../java_file.js">
</script>

It works wonderfully but I want to have a different js file run when screen width is less than 480.

I want to do something along these lines:

<script type="text/javascript"
if (screen.width < 480) {
src=".../java_file_mobile.js">
}
else {
src=".../java_file.js">
}
</script>

This is my first time building a site and I'm learning the code as I go. Any assistance would be great. Thanks!

you can check this: http://stackoverflow.com/questions/610995/cant-append-script-element - it shows how script tags are appended — Dariux, Sep 12 '14 at 20:13

score 0 · Answer 1 · answered Sep 12 '14 at 20:43

If you only care about the screen width the simplest approach is to use JavaScript offsetWidth.

var w = document.body.offsetWidth;

if ( 480 > w ) {
    //append mobile script
} else {
    //append desktop script
}

Beaver though, a small offsetWidth could also just mean a narrow browser window on a desktop screen. Or a watch. Or a fridge. You get the idea...

1 Answers1