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">

但是我们知道，我们只能使用一个视口规则，并且与媒体查询不同，视口规则的“宽度”参数中没有（最小宽度）和（最大宽度）。我想做的是，使用Javascript获取用户所在设备的宽度，然后根据该宽度回显元视口规则。

如果宽度小于500像素且大于400像素，则它将回显一个规则。如果没有，请遵循其他规则。希望我有道理。我确定这是可以实现的，但我无法实现。

我们非常感谢您的帮助！预先感谢！

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

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

2 个答案: