Search code examples
csswebmobile-websitepixel

Mobile site renders CSS pixels at physical pixel resolution?


I'm having a difficult time understanding the problem, let alone explaining it, so I have a picture of the issue.

Screenshot of the mobile page

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.


Solution

  • 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.