CODEWITHSUNDEEP
csshtmlmobile
MadeInDreams
MadeInDreams

Reputation: 2146

CSS document height on mobile device

Ok so my page display as expected in browsers on my PC. However when i load my page on a mobile device, for some reason, the document height is not 100%

I have read on it and a lot of them suggest to set the position to absolute. I cant do that in my case because i use divs to get my page centered.

It seams like my mobile device load the page height based on its content instead of actual css values.

my body height and all other containers are set to 100%

The footer is set to bottom 0. But 0 ist not the bottom of the screen on my phone its more like the length of the content. I have tried adding

echo ' <meta name="viewport" content="width=device-width,height=device-height initial-scale=1">';

but it still the same.

Update: Ok its seams like what i was seeing on my phone was not to scale. It was set to fit the screen width but the height was not adjusted to that scale. So no mater what scale im using the height setting will remain. I will try to use the fixed property to my footer and keep you posted. Thank you

Upvotes: 1

Views: 948

Answers (1)

Alex
Alex

Reputation: 8695

I think you missed , after height property. Change

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

to

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

Upvotes: 1

Related Questions