html - Why is text within a fieldset appearing sometimes larger on mobile devices? -

-

this question has answer here:

i found strange chrome “feature” don't understand. when using fieldset responsive design, text within fieldset appear bigger compared other contents of page.

when remove few characters text, takes same size other block on page.

for instance, following page generated chromium 49 using device mode. display similar on android smartphone running chrome. firefox in responsive design mode doesn't have glitch.

enter image description here

this the corresponding code. there no external css files.

<html> <head> <style> body{font-size:.8em;} </style> <body> <div>     <p>         lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta sus cipit ultricies.         sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.         vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen tum orci, id vulputate nisl mauris non mas.     </p>     <fieldset>         <p>             lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta  suscipit ultricies.             sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.             vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond imentum orci, id vulputate nisl mauris non mas.         </p>     </fieldset>     <fieldset>         <p>             lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta  suscipit ultricies.             sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.             vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond imentum orci, id vulputate nisl mauris non ma.         </p>     </fieldset> </div> </body> </html>

in piece of code, first <p> of page , 1 inside first <fieldset> contain same text. paragraph in second <fieldset> contains 1 character less.

what happening?

note ugly workaround consists of specifying fieldset{font-size:.999em;} in styles. makes 3 paragraphs appear similar. being said, i'm more interested origin of feature/glitch rather workaround/hack.

i discovered behavior design.

in order prevent chrome on android or chromium in device mode adjust font size depending on content of block, following meta element should added:

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

source: joe derose's answer similar question.

further reading: using viewport meta tag control layout on mobile browsers @ mdn.


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more