停止元视口响应

Question

演示

我想像在这个网站上做出响应行为.有meta viewport内容设置width=device-width, initial-scale=1, maximum-scale=1,但如果我通过减少其宽度(大约200px宽度和更小)调整浏览器视频大小,内容按比例缩放和响应"切换".

你可以将这个网站和jsFiddle演示与下面的图片进行比较.具有相同字体大小的相同文本,但缩放比例不同.

UPD

我需要知道如何设置20px字体大小,它将按比例缩放,而不使用meta viewport.尝试制作一个<h1>有meta viewport和没有一个,你会明白我的意思

Answer 1

您的问题尚不清楚,但假设您正在谈论的事实是,在您的演示中,内容在某个最小宽度后阻止其调整大小:

理解它的功能很重要meta viewport.

视口是用户在网页上的可见区域.

视口因设备而异,并且在手机上比在计算机屏幕上小.

- 来源

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

您的网站响应直到某个最小宽度没有任何直接链接的事实meta viewport.

网站的响应性基于breakpointsCSS中的内容.这给出了基于视口属性的某些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为所需的最小宽度).

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