我有一个固定宽度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的不同设置无效。
答案 0 :(得分：1)
最终做到这一点的是：
<meta name="viewport" content="width=1550px, initial-scale=1.0, user-scalable=1;" />
这似乎可以在Chrome，Firefox和iOS Safari中发挥作用。
值1550px是因为我在div [3]的两边都有20px的余量。
希望这可能会帮助其他人解决同样的问题。