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

Question

我有一个固定宽度为div（[2] 800px）的网站，以百分比（[1] 100％ ）宽度div。再往下看，我有另一个固定宽度div（[3] 1510px）。一切看起来，因为它应该在桌面浏览器：

桌面浏览器

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

但是，当我访问我的网站与Chrome浏览器使用Android手机上，事情看起来很奇怪：

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

这似乎这样的伎俩在这两个浏览器，Firefox和Safari浏览器的iOS。 值1550px是因为我在div [3]两边都有20px的页边空白。

希望这可能会帮助其他人也有同样的问题。