i'm having trouble understanding of how em should work in css. i'm trying element (div in case) scale same way font does. i've narrowed problem statement down small can.
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> body { font-size: 100%; } .eventreg { border:solid #000000 .063em; background-color:#000000; padding:.625em; width:13.65em; } </style> </head> <body> <div style="font-size:2em;">event registration</div> <div class="eventreg"></div> </body> </html> this seems scale correctly in ie, ff, , chrome, when change body { font-size: 100%; } other percent.
what i'm expecting see in computer browser div , text exact same length. however, when check android smart phone text quite bit wider div.
i expect div under text same width text though it's scaled.
any ideas i'm doing wrong or assumption wrong?
it might have -webkit-text-size-adjust property. try adding following style css.
* { -webkit-text-size-adjust:100%; } on mobile phones, browser adjusts font size make websites more readable. setting property 100% (or possible none) should prevent happening.
Comments
Post a Comment