I have faced a weired behavior and I can not find what is the reason of this behavior. My websites have two different rendering when I resize the Google Chrome manually and when I check the website in the Device simulator (using developer tools).
Brief:
<html>
<body>
<div>
//Entire the codes here with no overflowed element
</div>
</body>
</html>
I have no styling on the width of HTML and BODY tags. The direct child of body is a DIV again with no styling on width (So it should cover 100%). When I resize the window manully the DIV covers 100% of the width of viewport but when I resize the window in device simulator (developer tools), the child DIV is being shrinked faster than the viewport and whitespace appears in right of window.
In a real mobile device, When I check the website, the top menu Icon goes out of the width of screen and I can see the half of this icon so it seems that the rendering in the device simulator is the real logic which happens is a real device. If you zoom out then webpage in a real device, the Menu icon comes back to the screen however I have set the following and I expect that the page open in full width by default But it seems zoomed-In that I can oom out after page load):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More checks:
- There is no calculated padding and margin in body and html when I inspect elements.
- I have removed AOS library from the webpage to make sure that the thirdparty library is not making margin and padding but no change.
- I have tested
overflow-x:0for body to make sure there is no overflow element but no change.