So I made a 'practice' website and haven't really grasped mobile optimization. Instead, I want to take a different approach which many websites do do. I want my site to display a horizontal scrolling bar on the bottom of the page if and ONLY if the site is minimized. All my element sizes are in percentage quantities and even all my divs has a style of 100% height and width. I also want all the elements to stay the same in position and none to shift around or disappear. For my case, whenever my site is minimized the following happens:
The site will be trying to adjust to a mobile viewport, you can prevent this by adding:
<head> <title>My Website</title> <meta name="viewport" content="user-scalable = no"> </head>
<head> <title>My Website</title> <meta name="viewport" content="initial-scale=1"> </head>
The problem is likely with your viewport tag.
You will also need to set a fixed width on the body.