我正在研究一种半响应式网页设计，该设计可以适应（具有响应式行为）大于 480px 的任何屏幕宽度。但是，我的布局无法适应480px以下的屏幕宽度。在此点以下，我希望移动设备发挥其魔力并缩小页面内容（按比例缩小），以使其适合设备的宽度，而无需水平滚动。
我已经阅读了 ViewPort 元标记上的Android和IOs文档，并尝试了许多不同的组合。下面的代码将使布局响应行为在480px以上时“起作用” ，然后如预期的那样将缩小以适应屏幕宽度在480p以下时。
<meta name="viewport" content="width=480">
但是，如果用户应用了缩放，它将为当前移动浏览器窗口保存该状态，并且水平滚动将显示并且除非用户手动缩小<< / strong>。即使用户重新加载页面，它也不会重置为预期的缩放比例。至少，这就是在 iPhone 上进行测试时的行为。我不知道在何处针对不同的 Android 分辨率进行测试。
<meta name="viewport" content="width=480, initial-scale=1">
如果我添加初始比例，如上所示，缩放将在重新加载页面时重置，但是由于将其设置为1，因此如果没有水平滚动，缩放将无法缩小以适合设备宽度。 相反，它将具有100％的宽度（480像素），并在该分辨率下在屏幕上显示水平滚动。
我想基于它的属性，进一步了解 ViewPort 在不同设备上的元标记行为，因此我可以确保在所有设备和分辨率下都能获得预期的结果。在这种情况下，我想让它在480px以上保持响应，并让移动设备将其缩放到低于该值，以便它适合设备宽度而无需水平滚动。是否可以仅使用 ViewPort 元标记来完成？如果没有的话，如果可能的话，我宁愿不需要使用任何JS库的解决方案。谢谢。