如何将视口缩放到最小宽度

Question

问题：我的页面看起来很糟糕

尝试的解决方案：

• （例如 320 像素屏幕）将初始比例设置为 1.5，但随后我需要为 320-480 像素之间的所有屏幕尺寸相应地设置比例。
• （例如 320px 屏幕）将视口的宽度设置为 480px，但是这使您需要在屏幕上滚动而不是像设置比例那样缩小。

问题：看来我需要的是两种解决方案的结合。一个可以缩放我的视口，但只能在屏幕上显示最小宽度（例如 480px 的内容）之前。没有 javascript 是否可行，或者解决方案 #1 是我需要做的吗？

其他注意事项：解决方案需要适用于所有浏览器/移动设备 (IE11+)

Answer 1

我不能 100% 确定您要做什么，但如果我理解正确，您可以在 css 中设置它。将宽度设置为 100% 将使其对您的视口窗口保持灵活，并且设置最小宽度将不允许它变得更小。

html,body { 
     width: 100%; 
     min-width: 480px;
     height: auto;
}

Answer 2

您是否尝试过使用媒体查询？

例如：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}