有什么方法可以在视口上设置最小宽度 HTML

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.

继续缩小

所以基本上总结一下，我的 window 宽度为 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">

同样，视口属性会告诉您的浏览器启动时应在屏幕上显示多少文档。如W3C所述：

This specification provides a way for an author to specify, in CSS, the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.

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

这是为小于 960 像素宽度 的设备开发网站时的传统方法（浏览器采用此默认宽度），您可以设置视口，以便浏览器正确显示文档。

现在最好的做法是在 HTML:

中进行设置

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

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

有什么方法可以在视口上设置最小宽度 HTML

Is there any way to set a minimum width on the viewport HTML

html

css

viewport