Meta viewport ONLY for phones?
css, media-queries, mobile, viewport
Solution
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.
Problem
Is there a way to set the general responsive meta viewport () only for phones? We have a website that without that `meta` tag, zoomed out, looks fine on 7" and larger tablets, portrait and landscape, but it was just a bit too inconvenient on smaller devices. So to get it working how we wanted on phones, I had to use the `<meta name="viewport">` tag, which then forced some media queries to fix things on the larger devices. Is there a way to set that `meta` tag on phones, and just device default zoomed out view on larger devices? Thanks! Rich