停止元视口响应

Question

Demo

我想在此网站上做出响应行为。 有meta viewport内容设置为width=device-width, initial-scale=1, maximum-scale=1，但如果我通过减小其宽度（大约200px宽度和更小）来调整浏览器视口大小，则内容按比例缩放并响应性“切换”。

您可以比较本网站和jsFiddle演示与下面的图片。具有相同字体大小的相同文本，但缩放比例不同。

UPD

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

Answer 1

该解决方案很简单。我只需要设置身体min-width

Answer 2

你的问题还不清楚，宽度：

理解meta viewport的功能很重要。

视口是用户的网页可见区域。

视口因设备而异，在手机上比在电脑屏幕上小。

- Source

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

事实上，您的网站是响应，直到一定的最小宽度没有任何直接链接到meta viewport。

网站的响应速度取决于CSS中所谓的breakpoints。这给出了基于视口属性的某些CSS规则（在响应情况下：如果屏幕宽度在某个最小量px和最大量之间）。据我可以理解，你的实际需要来设置CSS属性min-width到您的网站的身体是这样的：

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

你所要做的下一件事就是选择你将如何处理比300px较小的屏幕。有在此之后两个选项：

• 您可以选择强制给你的网页设备的宽度和预防水平滚动，但这将隐藏所有的溢出。我个人建议不要使用这种技术。为此，您需要隐藏所有html的CSS溢出：html {max-width: 100vw; overflow-X: hidden;}。

• 其他（更好）选项是给你的网页最小所需的宽度。这将允许水平滚动和更好的用户体验。为此，请使用此CSS代码：html {min-width: 300px; overflow-X: visible;}（请记住用您想要的最小宽度替换300px）。

这应该是所有现在。请记住，有数百个可用的响应式网页设计指南。希望你的问题得到解决。