meta viewport only for mobile (screen width less than 640)

Question

I'm doing a site, that should scale on the screen with width more than 640 (desktop and tablet) and appear as a mobile version on devices less than 640 (smartphones).

So I need meta[name=viewport] for smartphones, and don't need it for other devices.

Currently using in a head such a code

<script>
        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {
            document.write("<meta content='width=device-width, initial-scale=1' name='viewport'>");
        }
</script>

But it doesn't help to weed out devices with a width more than 640 (tablets).

Detection of screen.width in the head also doesn't help, because androids returns an incorrect width, if it isn't announce the meta viewport before.

Is somebody know, how to detect tablets in head or to achieve the results I want.

Answer 1

What you want to achieve is I think a responsive website and thus you need css media queries for that:

In the head section you can add:

< meta name="viewport" content="width=device-width" >

In your css you should do this so that it will detect the size of the screen and it will response (change) depending in your design on width that is more than 640pixels.

@media screen and (min-width:640px){

//some code here

}

This site could help you learn responsive web design http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/