android - 移动网站比设备宽，捏一下就可以了

Question

我正在设计需要响应的网站。

我的问题是，在移动设备中，这些网站一开始显示得比屏幕还宽。这意味着我可以向左或向右移动它，就像主容器没有“固定”到 100%。但它是:

#main-container {
    width: 100%;
}

但是一旦我“捏”屏幕(用手指一起按)，网站就会完美呈现，所有 DIVS 都在屏幕内并且网站可读。就像一个完美的响应式网站。

如果我刷新或导航到一个子页面，该网站再次比屏幕大，需要将它们放在一起，然后一切正常。

它发生在所有 414 像素宽以下的智能手机(Android 和 iPhone)中。平板电脑以上都可以

我怎么能对我的网站“说”它们应该在设备内部打开，无论它在哪里？

Answer 1

也许定义元标记 viewport 的 initial-scale 会对您有所帮助。

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

在这里阅读更多相关信息:https://www.w3schools.com/css/css_rwd_viewport.asp