Meta viewport ONLY for phones?
Do you mean this <meta name="viewport">
?
<meta name="viewport" content="width=device-width, user-scalable=no" />
If so, try the following script added in the <head>
(taken and adapted from here):
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}
This will detect if the user-agent indicates that the browser is mobile, and will write that meta viewport as required.
Actually, this might be a better solution: Add a script after meta viewport tag that will change the value if the screen is bigger than specified.
<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1">
<script>
if (screen.width > 590) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=980');
}
</script>
There can be variations of this script. For example you could set the actual screen width as viewport, instead of a fixed value.