chrome android setting width to 100%

Question

I've got a problem with the css on android with the chrome browser

what i do in css is:

html{
max-width: 100%;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}

body{
background-color: rgba(101,122,151,0.8);
margin: 0px;
width: 100%;
overflow: hidden;
position: relative;
}

header {
width: 100%;
min-width: 100%;
color: yellow;
font-size: 40px;
text-align: left;
}

and in the javascript i outprint the widths of the body and header

alert($('header').width());
alert($('body').width());

it is showing me the body width is 980 and the header width is 340 but I don't understand why. can someone help me? Thanks

Answer 1

When loading a webpage on a mobile browser, the browser will assume the site is designed for a larger screen and gives a larger viewport than the device so the user can zoom in on the content.

If you want the width of the device, you need to set the viewport size which can be done with:

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

There is more info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics