I had a doubt when i was alive

Question

font size not consistent!
font-size:20px in (sololearn_web_output != chrome)
in chrome text is quite bigger

https://sololearn.com/compiler-playground/WusSkkREHT81/?ref=app

tried different units but didn't work
tell me if you know "how to make it consistent"
for the peace to my spirit

Answer 1

it's not trivial what a pixel in CSS is in physical size.

It is defined by degreese of visual angle (not inch or centimeters):
"The proper dimension of a CSS pixel is actually dependent on the distance between you and the display."
https://hacks.mozilla.org/2013/09/css-length-explained/

So whatever the browser/ environment assumes as viewing distance, the physical size of a pixel can vary (though it is of course limited by the physical device of course)

Answer 2

how large 1 pixel is depends on device and browser (e.g. a device pixel is not necessarily equal to a browser's pixel). i think the keyword is "virtual pixel".

Answer 3

There is a suggestion in StackOverflow to use a css reset. Here is a link to one.

https://meyerweb.com/eric/tools/css/reset/

I haven't actually tested it, so I don't know how effective it is.

Answer 4

Lisa both browser showing screen width = 360px. and for margin,padding it works well but fails in font-size.

it there any solution to make it consistent.

Answer 5

the font type is "sans-serif" and if you do not specify the font exactly, the browser will use its default.

Answer 6

Lisa tried specific font, tried google fonts too, tried different units, nothing worked..

my spirit won't get peace! thank you for your time.

Answer 7

Andrew [DEAD] another option might be using @media

/* For screens smaller than 768px (typical phone width) */
@media only screen and (max-width: 768px) {
body {
font-size: 14px; /* Adjust as needed for smaller screens */
}
}

/* For screens between 768px and 992px (typical tablet width) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
body {
font-size: 15px; /* Adjust as needed for tablets */
}
}

/* For screens larger than 992px (typical desktops) */
@media only screen and (min-width: 992px) {
body {
font-size: 16px; /* Base font size for desktops */
}
}

Answer 8

Please check browser mode
Desktop / Mobile