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
Post a Comment