Question

我知道之前已经问过这个问题;但是，我没有看到任何有效的答案，至少对我而言。这就是我的意思：

当我在我的文档头中写下

<meta name="viewport" content="width=700">

它就像它没有任何效果一样，它始终只是设备宽度的尺寸。

与此javascript解决方案相同，该解决方案在看到屏幕宽度小于我看到的此问题的答案的指定最小宽度时设置最小宽度。

<script type="text/javascript">

            var viewport = document.createElement("meta");
            viewport.setAttribute("name", "viewport");
            if (window.innerWidth < 700) {
                viewport.setAttribute("content", "width=700");
            } else {
                viewport.setAttribute("content", "width=device-width, initial-scale=1");
            }
            document.head.appendChild(viewport);

</script>

但仍然没有效果。

所以我一直在做的就是设置html和body上的最小宽度，就像这样

html, body {
  min-width: 700px;
}

我很高兴能说出色的工作，但我需要视口元素的最小宽度为700px的原因是因为我font-sizes基于vw和vh （视口宽度和视口高度）因此网页的最小宽度为700px，但字体大小会根据device-width继续缩小。

所以基本上总结一下，我的窗口宽度为400px，页面宽度为700px，字体大小基于400px的页面宽度。

请帮忙！任何建议都将不胜感激。

Answer 1

你可以用纯CSS做到这一点！

@media screen and (max-width: 700px){ html,body {min-width:700px} }

如果浏览器宽度小于700px，则将html和body min-width设置为700px。

Answer 2

您无法使用视口属性更改文档或正文的大小。您已经知道视口是元标记的属性。这意味着这些属性供您的浏览器使用，而不是您的文档。例如：

<meta name="author" content="John Doe">

类似地，viewport属性会告诉您的浏览器启动时屏幕上应显示多少文档。如W3C所述：

此规范为作者提供了一种在CSS中指定的方法用作视口的大小，缩放系数和方向初始包含块的基础。

含义它指定浏览器在启动时（初始包含块）显示（缩放）网页（文档）时应采用的宽度（和高度）。

这是开发小于 960px宽度的网站（浏览器假设此默认宽度）的网站时的遗留方法，您可以设置视口，以便浏览器正确显示文档。

现在，最好的做法是在HTML中设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用css媒体查询管理其他所有内容，这样您的用户就不必因为小型设备上的错误扩展而放大或缩小。

有没有办法在视口HTML

2 个答案: