CODEWITHSUNDEEP
htmlviewport
Jovan Perovic
Jovan Perovic

Reputation: 20191

Weird whitespace on the bottom of page (mobile)

My client has reported a stange issue with his website. URL of the web-site is your-montenegro.me

A stange white space appears at the bottom of the page when it's loaded on Android-based browser. Here are the screenshots:

When I try to open this web-site:

Do you have any idea what to try?

I have tried playing view browser viewports but wasn't able to come with a solution.

Edit:

Also, when I load this page on Huawei Ascend first time, site appears a bit zoomed in (which is totally fine/expected), but scrolling down still reveals the white-space.

Edit2 (screenshots):

Huawei Ascend: Huawei Ascend

HTC Desire S HTC Desire S

Upvotes: 2

Views: 2213

Answers (1)

David
David

Reputation: 4361

I tested the site using the viewport below and it appears to fix the issue.

<meta name="viewport" content="width=device-width, user-scalable=yes">

The problem is because most mobile devices have a pixelRatio of 2. This causes your forced height of 960px to become 1920px because the mobile browsers believes that's what you meant. Since your background isn't 960px you get all the white space.

I only tested this using the Chrome Emulator which you can learn more about at https://developer.chrome.com/devtools/docs/mobile-emulation which lets you emulate a ton of mobile devices easily.

Upvotes: 6

Related Questions