So, when testing my project on windows phone I stumbled across a problem I have not seen yet, neither know how it gets there nor how to fix it.
Image of the problem here
So the problem is that I specify that it has to use 100% of the width and height. With that, overflow is hidden so that there would never be a scroll bar.
Now when I look at the page in portrait mode, it does not use 100% of the screen at all. (see the image)
Then when I rotate the mobile to see the landscape view, it stays the same size but then just zoomed in. This causes there to be a scroll bar since the page is larger than the height of the mobile. But the page is still not the full width of the browser.
I can not reproduce this problem in Edge's emulator. Neither do I have this problem in any other browser.
Add to your head section
<meta name="viewport" content="width=device-width, initial-scale=1">