What is happening is that since you have the
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
and you specify the width in your divs, then an actual value of, say, 1000 pixels is being applied to the div. According to documentation:
When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used.
If you want to achieve divs with widths in respect to one another, an easier ruote would be using percentages, something like:
<body>
<div style="width: 25%; height: 50px; background: green;">25%</div>
<div style="width: 50%; height: 50px; background: yellow;">50%</div>
<div style="width: 100%; height: 50px; background: red;">100%</div>
</body>
If you aim to have a 'wide' viewport, like a desktop, you should pass true and not specify a meta tag as mentioned:
If the page does not contain the tag or does not provide a width, then a wide viewport will be used.