Fixed-width div in website forces relative-width div to keep the same width as the display in mobile browsers

Question

I have a website with a fixed width div ([2] 800px) centered inside a percentage ([1] 100%) width div. Further down on the page I have another fixed width div ([3] 1510px). Everything looks as it should on desktop browsers:

Desktop browser

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

But when I visited my site with Chrome on my Android phone, things looked really weird:

Chrome on Android

(The dotted line is the screen boundary)

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

The weirdest part was that when zooming out to see all of div [3], div [1] and [2] kept their widths at the screen width, making them look really strange on the fully zoomed out site.

Setting width: 100% to html and body and adding the

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

with different settings for initial-scale and user-scalability have no effect.

Answer 1

The thing that did the trick eventually was this:

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

This seems to do the trick in both Chrome, Firefox and iOS Safari. The value 1550px is beacause I have a 20px margin on both sides of div [3].

Hopefully this might help out others with the same problems.