Meta viewport ONLY for phones?

Question

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

score 11 · Accepted Answer · edited May 23 '17 at 12:08

11

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.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 08 '13 at 21:25

Robbie JW

729
1
9
22

If my answer helped, vote it up and mark it as an answer by clicking the tick on the left. Doing this lets other people know that your question was answered, and both you and I gain reputation. Everyone wins! – Robbie JW Aug 09 '13 at 10:08
This does not answer the question, does it? This will still target ipads and Android tablets. – RedNaxel Jan 04 '16 at 11:56

score 4 · Answer 2 · answered Jan 04 '16 at 15:45

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.

score 0 · Answer 3 · answered Jan 04 '16 at 12:27

To achieve this, don't use <meta> tag and don't use @media queries inside your general .css file.

Instead, use this kind of tag:

<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="wp-content/themes/thestory/css/320.css">

And create styles for those devices in the separate .css file (like 320.css in this example).

Meta viewport ONLY for phones?

3 Answers3

Linked