Why does the Chrome DevTools Responsive viewport think it's 980px wide?
<p>I've used Chrome DevTools to resize the viewport to 480px wide, as shown below. </p>

<p>I'm using bootstrap's grid layout, so I have a <code>div.container</code> that I'm using, as shown in the bottom left. When I hover over it, I see chrome has that particular <code>div</code> marked as width <code>750px</code> (and the whole <code>body</code> is <code>980px</code>), even though I clearly have the screen set at a smaller resolution. Even the ruler at the top shows it is 480px wide.</p>

<p>For further confirmation, you can see the media query that says the width of 750px should only be set at higher resolutions (min 768px), so the viewport is assuming it's a higher width than it is.</p>

<p>Am I mis-understanding how the responsive feature is used?</p>

<p>Thanks!</p>

<p><a href="https://i.stack.imgur.com/cHU7y.jpg"><img src="https://i.stack.imgur.com/cHU7y.jpg" alt="enter image description here"></a></p>