CODEWITHSUNDEEP
cssmobilezoomingviewportpinchzoom
vega
vega

Reputation: 127

CSS mobile version of web site is zoomed in A LITTLE BIT when loaded (only whatchable with mobile device)

I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.

It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.

Btw, I have set

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

Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.

But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.

So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.

Thanks a lot in advance, mates.

Upvotes: 2

Views: 1015

Answers (1)

Jeff Clarke
Jeff Clarke

Reputation: 1397

Set your box model for the the #container and #header divs to border-box:

box-sizing: border-box;

You may need to prefix this depending on what browsers you are supporting. More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 2

Related Questions