android - 移动设备上的视口(viewport)元标记问题

Question

我有一个响应式的 Bootstrap 网站。高于 1200px，容器宽度为 1170px，低于 1200px，则缩小到 970px。低于该值的任何内容也将获得 970px 版本。

在我的元标记中，我有这个:

<meta name="viewport" content="width=device-width, initial-scale=1">

无论是在台式电脑还是 iPhone 或 iPad 设备上，一切都完美无缺。然而，在像三星 Galaxy 这样的基于 Android 的手机上(我相信视口(viewport)是 360x640px)，该网站在横向模式下也显示得很好，除了每次加载页面时它都会放大。这意味着它显示正常，但用户必须左右滚动。用户可以缩小然后显示全 Angular 而无需滚动，但下次加载页面时，同样的情况会再次发生。

有什么简单的方法可以调整/解决这个问题吗？

我尝试删除 width=device-width 部分，但这会扰乱 iOS 设备上的设计，并且 1px 的线条无法正确显示。

Answer 1

尝试使用

@media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example

您可以使用设备宽度/您的 html 宽度来计算

这对我有用..我需要在平板电脑上缩小，所以我添加了这个..