Does the browser page width affects the page height in mobile?-CodePudding

I am creating a website that will have a large width element. When accessed via mobile, it will have a horizontal scroll.

The problem is that the screen height is growing and seems to be affected by the larger width elements. I want to know if this is what is really happening and how could I avoid the height change.

I created a code sandbox to show the problem. There is a <p> tag positioned at the bottom of the page, just to mark the page height.

To reproduce it: open the sandbox preview URL in a mobile device (I used Chrome in an Android 12 phone). In the desktop, it can be reproduced by opening Firefox in Responsive Design Mode and selecting the option "Enable touch simulation".

My failed attempts so far were: I tried to set the body height height: 100vh; and to change the viewport meta tag:

<meta
   name="viewport"
   content="width=device-width,height=device-height, initial-scale=1.0"
/>

If anyone can help / point me to any resources, I really appreciate it!

CodePudding user response：

Get rid of height=device-height from your meta tag. That is what is causing the height to increase.

Also, create a wrapper element for the <h1> tag. This wrapper element will have a width that is equal to the default width of the body. The height issue is occuring when the width of the body is getting increased, since the body element increases its width to match the width of the content inside it.

To prevent that from happening, set the wrapper elements width to 100%, so that it will not go beyond the width of the screen, and set overflow-x: auto

Your new html and css will look like this:

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid red;
}

h1 {
  width: 1400px;
  background-color: fuchsia;
}

html,
body {
  height: 100%;
}

.bottom {
  position: fixed;
  bottom: 0;
  background-color: green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div >
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>
  </div>
  <div >Fixed to the bottom of the page</div>
</body>

</html>

I've set a border for the wrapper so you can see its dimensions. If you want it to be the height of the entire screen, you can set height: 100%