Search code examples
javascriptmeta

JS for screen width

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

Solution

  • 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.