固定寬度的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的頁邊空白。

希望這可能會幫助其他人也有同樣的問題。