JS for screen width

Question

How do you load a file based on the browser screen size? This is the code I'm using:

<script>
if(iPhone) { <- screen size instead of device
  document.write("<meta name="viewport" content=\"width=480\""+"/>");
} else {
  document.write("<meta name="viewport" content=\"width=1024\""+"/>");
}
</script>

Thanks

Answer 1

You could try:

<script>
    if (window.screen.width < 481) {
        document.write("<meta name="viewport" content=\"width=480\""+"/>");
    } else {
        document.write("<meta name="viewport" content=\"width=1024\""+"/>");
    }
</script>

The code for screen size is simple as it is just window.screen.width and window.screen.height . I would not recommend targeting a website towards a specific device unless you plan to design the website with the same design patterns as that website.

Answer 2

You could write your own Javascript using document.body.offsetWidth.

eg if(document.body.offsetWidth < 1024){...}

Or use a library like: http://responsejs.com/