停止元视口响应

Question

我想做出像在这个网站上一样的响应行为。 meta viewport 内容设置为 width=device-width, initial-scale=1, maximum-scale=1，但如果我通过减小其宽度（大约 200px 宽度或更小）来调整浏览器视口大小，内容会按比例缩放并响应 "swithes off"。

您可以将此站点和 jsFiddle 演示与下图进行比较。具有相同字体大小的相同文本，但缩放比例不同。

UPD

我需要知道如何设置 20px 字体大小，它会像不使用 meta viewport 一样按比例缩放。试着做一个 <h1> 有 meta viewport 而没有，你会明白我的意思

Answer 1

您的问题不清楚，但假设您说的是 demo 上的内容在某个最小宽度后阻止其调整大小：

了解 meta viewport 的功能很重要。

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

-Source

此功能可防止用户放大或缩小您的网站。你给我们的代码说你的网页的宽度必须是父视口的宽度（等于你浏览器的可视区域），初始缩放必须是 1 （这意味着没有设置初始缩放）并且最大比例可以是 1（这意味着不允许放大）。

事实上，您的网站在达到某个最小宽度之前是响应式的，这对 meta viewport 没有任何直接的 link。

网站的响应速度基于 CSS 中所谓的 breakpoints。这给出了基于视口属性的某些 CSS 规则（在响应情况下：如果屏幕的宽度介于某个最小值 px 和最大值之间）。据我了解，您实际上需要将 CSS min-width 属性设置为您网站的正文，如下所示：

body {
    min-width: 300px; /*You'll have to set the value you wish here*/
}

接下来您要做的是选择如何处理小于 300px 的屏幕。这之后有两个选项：

您可以选择强制为您的网页指定设备的宽度并防止水平滚动，但这会隐藏所有溢出。我个人建议不要使用这个技巧。为此，您需要使用此 CSS 隐藏所有 html 的溢出：html {max-width: 100vw; overflow-X: hidden;}.
另一个 （更好） 选项是为您的网页提供所需的最小宽度。这将允许水平滚动和更好的用户体验。为此，请使用此 CSS 代码：html {min-width: 300px; overflow-X: visible;}（请记住将 300px 替换为您想要的最小宽度）。

现在应该就这些了。请记住，有数百个响应式网页设计指南可供使用。希望您的问题得到解决。

Answer 2

解决方法很简单。我只需要设置 body min-width

停止元视口响应

Stop meta viewport responsiveness

html

responsive-design

meta-tags