I'm having a difficult time understanding the problem, let alone explaining it, so I have a picture of the issue.
I'm using ratios of 100% and 100vw for element widths. Everything renders at the right scale, and when I inspect the element it says that it is the correct width, but it seems to be rendering at the actual physical pixel size of the device. I could be completely wrong about that, I'm not entirely sure. I've never encountered this particular issue before.
As you could likely guess, I need the body of the page to fill the mobile device's viewport width. Any help is great. Thanks.
The issue is due to the following:
<footer>
<nav class="row">...</nav> <!-- This has a width of 1100px -->
</footer>
Remove the fixed with on the nav.row and it should work.