Html Body Not Filling Complete Width On Mobile Devices

If I open my (GWT) page in a normal browser, everything works fine. The body takes the whole width and the content is nicely centered. But if I try this on a mobile phone, the body

Solution 1:

this was driving me crazy and i just solved it by adding position:fixed to the body

Solution 2:

Why is body not full width, even though its set to 100% / vw?

In a strange way it is full width, but the viewport is scaled down automatically by the browser, so it fits in the overflowing content.

To check, if this is the case, type this in the console (1): window.visualViewport.scale

1) edit Sep. 2019: visualViewport: only available on Chrome - sry for late notice

If it returns something like 0.8, then the body size is correct, but the viewport is scaled down.

You can also double tap to toggle between scale 1 and "fit-content-scale"(needs touch simulation like in chrome dev-tools).

How to not overflow body?

• See here https://stackoverflow.com/a/14271049/3313410 "Creating a site wrapper div inside the body"
• or check, if a certain element has a min-width, that "overrides" its width
• or check, if something is rotated, or margins out https://stackoverflow.com/a/45534745/3313410

Solution 3:

It might be because of a very long word on your webpage. After using the correct viewport meta tag:

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

I tried this out, by placing this text inside a paragraph element, inside some empty HTML document:

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

What happened when I decreased the screen size without the mobile phone simulator:

And what happened when I decreased the screen size with the mobile phone simulator:

Quite the difference. My tip: use the following CSS attribute:

p {
    word-break: break-word;
}

Solution 4:

Just add this to your body tag and your problem should be solved:

body {
  position: absolute;
 }

Solution 5:

I can see that the problem behind this question was solved, but I just experienced the same issue and the answer here could not applied in my case because of the scroll disabling stated in the comment, and any other style modifications on the body seemed to affect the result.

After experimentation I found out this was caused by an element inside my page which was rotated and its height became an obstacle on mobile, since it was closer the right end of the body.

So I would like to add this answer if someone, like myself, find this question via google:

This problem can be caused by many factors, you may want to investigate if one of your component's width is not becoming a problem on mobile view. There is probably a div too long on your page, or a rotated one which margin got out of the body.