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

我有一个固定宽度

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;" />

---

对于

初始缩放

和

用户可伸缩性

的不同设置没有任何影响。

最终实现这一技巧的是：

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

这似乎在Chrome、Firefox和iOS Safari中都起到了作用。 值

1550px

是因为div[3]两侧都有20px的余量

希望这能帮助其他有同样问题的人