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

Question

我正在寻找适合我的情况的解决方案。基本上，我需要对设备宽度使用多个视口规则。类似于：

    <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，那么它会回显一条规则。如果没有，其他一些规则.. 希望我是有道理的。我确信这是可以实现的，但我没能实现它。

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

Answer 1

看看这个简单的代码片段，它允许您获取元内容信息和屏幕宽度：

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)

<meta name="viewport" content="initial-scale=0.4, width=400">

现在你可以创建这样的东西了：

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");
}

<meta id="viewport" name=viewport content="width=device-width; initial-scale=1">

Answer 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

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

Finding device width and echoing meta viewport rule

javascript

css

viewport

meta