查找设备宽度和回显元视口规则答案

【问题标题】：Finding device width and echoing meta viewport rule查找设备宽度和回显元视口规则
【发布时间】：2018-07-13 17:41:00
【问题描述】：

我正在寻找解决我的情况的方法。基本上，我需要对设备宽度使用多个视口规则。比如：

    <meta name="viewport" content="initial-scale=0.4, width=400"> 
    <meta name="viewport" content="initial-scale=0.6, width=700">
    <meta name="viewport" content="initial-scale=0.8, width=1000">

但正如我们所知，我们只能使用一个视口规则，并且与媒体查询不同，视口规则的“width”参数中没有（min-width）和（max-width）。我想要做的是，使用 Javascript 来获取用户所在设备的宽度，然后基于此回显元视口规则。

如果宽度小于 500px 大于 400px，那么它会呼应一个规则。如果没有，其他一些规则..希望我说得通。我确信这是可以实现的，但我无法实现。

非常感谢任何帮助！提前致谢！

【问题讨论】：

标签： javascript css viewport meta

【解决方案1】：

看看这个简单的代码sn-p，它可以让你获取元内容信息和屏幕宽度：

function getMetaContentByName(name, content) {
  var content = (content == null) ? 'content' : content;
  return document.querySelector("meta[name='" + name + "']").getAttribute(content);
}

let metaTag = getMetaContentByName("viewport", "content")
console.log(metaTag)

let width = window.screen.width
console.log(width)

&lt;meta name="viewport" content="initial-scale=0.4, width=400"&gt;

现在您可以创建如下内容：

let screen = {
  width: window.screen.width,
  height: window.screen.height
}

if (screen.width < 480) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.4, width=480");
} else if (screen.width < 720) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.7, width=720");
}

&lt;meta id="viewport" name=viewport content="width=device-width; initial-scale=1"&gt;

【讨论】：

【解决方案2】：

我还找到了一个简单明了的解决方案。那是通过使用 screen.width 属性并检查宽度范围，然后重置视口元标记的属性。它看起来像这样：

    <meta id="vp" name="viewport" content="width=device-width, initial-scale=0.3">
    <script>
    window.onload = function() {

    if (screen.width >= 300 && screen.width < 500) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.2,width=device-width');
    }

    else if (screen.width > 500 && screen.width < 600) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.4,width=device-width');
    }    

    else if (screen.width > 600 && screen.width < 700) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.5,width=device-width');
    }}

这样你可以加载不同的视口比例，这正是我所需要的。从这里归功于@Cpncrunch：Achieving min-width with viewport meta tag

【讨论】：