css - 网站中的固定宽度 div 强制相对宽度 div 与移动浏览器中的显示保持相同的宽度

Question

我有一个固定宽度 div ([2] 800px) 的网站，其中心位于百分比 ([1] 100%) 宽度 div 内。在页面的下方，我有另一个固定宽度的 div ([3] 1510px)。在桌面浏览器上一切看起来都应该如此:

桌面浏览器

|-----------------------------------------------------|
||---------------------------------------------------||
|| [1]       |-------------------------|             ||
||           | [2]                     |             ||
||           |-------------------------|             ||
||---------------------------------------------------||
|                                                     |
||---------------------------------------------------||
|| [3]                                               ||
||                                                   ||
||                                                   ||
||                                                   ||
||---------------------------------------------------||
|-----------------------------------------------------|

但是当我在 Android 手机上使用 Chrome 访问我的网站时，事情看起来真的很奇怪:

Android 版 Chrome

(虚线为屏幕边界)

................................
.|-----------------------------.----------------------|
.||-[1]-----------------------|.                      |
.|||-------------------------||.                      |
.||| [2]                     ||.                      |
.|||-------------------------||.                      |
.||---------------------------|.                      |
.|                             .                      |
.||----------------------------.---------------------||
.|| [3]                        .                     ||
.||                            .                     ||
.||                            .                     ||
.||                            .                     ||
.||----------------------------.---------------------||
.|-----------------------------.----------------------|
................................

最奇怪的是，当缩小以查看所有 div [3] 时，div [1] 和 [2] 的宽度保持在屏幕宽度，这使得它们在完全缩小的网站上看起来真的很奇怪。

将 width: 100% 设置为 html 和 body 并添加

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

initial-scale 和 user-scalability 的不同设置没有效果。

Answer 1

最终成功的是:

<meta name="viewport" content="width=1550px, initial-scale=1.0, user-scalable=1;" />

这似乎在 Chrome、Firefox 和 iOS Safari 中都有效。值 1550px 是因为我在 div [3] 的两边都有 20px 的边距。

希望这可以帮助其他遇到同样问题的人。