css - chrome android setting width to 100% -


i've got problem css on android chrome browser

what 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 javascript outprint widths of body , header

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

it showing me body width 980 , header width 340 don't understand why. can me? thanks

when loading webpage on mobile browser, browser assume site designed larger screen , gives larger viewport device user can zoom in on content.

if want width of device, need set viewport size can done with:

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

there more info here: http://docs.webplatform.org/wiki/tutorials/mobile_viewport


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -