Meta viewport ONLY for phones?

后端未结

关注

 3  1891

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

相关标签:

3条回答

清歌不尽

2021-01-02 11:40
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).
0 讨论(0)
发布评论:

提交评论
- 加载中...
Happy的楠姐

2021-01-02 11:59
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

鱼传尺愫

2021-01-02 12:01

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.

0 讨论(0)