HTML body does not fill full width on mobile devices

Question

If I open my (GWT) page in a normal browser, everything works fine. The body is full, and the content is nicely centered. But if I try to do this on a mobile phone, the body will not occupy the entire width and, therefore, the content will not be centered.

I could not understand why this is displayed like this. In addition, adding 100% width to the body and HTML tag does not solve the problem.

Is there a way to make this work well on a mobile device?

The page is available at : http://www.vegantastic.de/

Answer 1

it drove me crazy and I just solved it by adding position:fixedto my body

Answer 2

body , 100%/vw?

, , , .

, , (1): window.visualViewport.scale

1) , 2019 .: visualViewport: Chrome -

- 0,8, , .

, 1 "fit-content-scale" ( , chrome dev-tools).

body?

• fooobar.com/questions/27841/... " div- "
• , min-width, "" width
• , - , fooobar.com/questions/1589070/...

Answer 3

- -. :

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

, , - HTML-:

<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>

Hide result

, :

, :

: CSS:

p {
    word-break: break-word;
}

Answer 4

, , , , , - , , , .

, , , , .

, , -, , google:

, , . , div, , .

Answer 5

body ( html) display: flex;. , , . overflow:auto; position:relative; flex, flex.

@import '../../variables.scss';
:host {
  overflow: auto; // added this line
}

.top-bar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-shadow: $shadow;
    position: relative;
    .search-item {
        flex: 1;
        margin: 0 1em;
        display: flex;
        flex-direction: row;
        position: relative;
        input {
            margin: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 0px;
            flex: 1;
            width: 1px;
        }
        button {
            margin: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border: 1px solid #ccc;
            border-left-width: 0px;
            box-shadow: inset $shadow;
        }
    }
    button.icon-only {
        border: none;
        background-color: transparent;
    }
}

:

:

Answer 6

body, :

body {
  position: absolute;
 }

Hide result

Answer 7

I have the same problem. In my case, there was an element gridwhich had many columns as well grid-gap 50px. This led to expansion html. I think it is good practice to zoom out grid-column-gapon small screens.

Answer 8

I have encountered this problem several times, especially on the iPhone.

I found a simple solution by accessing all elements using the * selector.

In my CSS, I set max-width in the media request to max-width, where I start to encounter a problem, for example:

    @media only screen and (max-width: 350px) {
      * {
        overflow: hidden;
      }
    }