android - viewport meta tag: initial-scale property behaves differently when width <= 320 -
android - viewport meta tag: initial-scale property behaves differently when width <= 320 -
i have been unable understand how width
, initial-scale
properties of viewport
meta tag works
i have next html code.
<!doctype html> <html> <head> <title>viewport illustration a</title> <meta name="viewport" content="width=321,initial-scale=1"> <style type="text/css"> body { background: #800000; } p { background: #ffffff; border: 1px solid gray; margin-left: 20%; margin-right: 20%; } </style> </head> <body> <p> lorem ipsum dolor sit down amet, consectetur adipiscing elit. ut european union massa erat, eget bibendum tortor. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos. aenean lobortis, leo et porttitor venenatis, sapien nunc sodales elit, ut condimentum nibh lacus sed erat. suspendisse potenti. mauris facilisis, odio nec commodo tempor, sem arcu dictum lacus, ac ultrices quam purus ultrices nisl. nullam cursus consequat nisl non sagittis. cras convallis porta dui european union viverra. maecenas ultrices arcu sit down amet nisi pharetra non malesuada erat tempus. </p> </body> </html>
i alter width
, initial-scale
properties , test output samsung galaxy sii phone user-agent: mozilla/5.0 (linux; u; android 2.3.4; en-gb; gt-i9100g build/gingerbread) applewebkit/533.1 (khtml, gecko) version/4.0 mobile safari/533.1
.
the next 3 images have next 3 properties respectively.
width=321,initial-scale=2
width=321,initial-scale=1
width=321,initial-scale=0.5
.... ....
the output above expect. initial-scale=2
, font margins have been scaled twice of initial-scale=1
, 4 times of initial-scale=0.5
. similar expected output width
> 320.
the next 3 images have next 3 properties respectively.
width=320,initial-scale=2
width=320,initial-scale=1
width=320,initial-scale=0.5
.... ....
the output here doesn't create sense me.
the margin seeninitial-scale=2
same seen initial-scale=1
. why? with initial-scale=0.5
see margin twice see initial-scale=1
. why has margin doubled instead of shrinking half? why hasn't font changed here @ all? i similar output doesn't create sense me width
≤ 320.
android browser webkit viewport
Comments
Post a Comment