Can we detect font size or font family in mobile device in web project?

Question

I am working on a project where I need to change font style and size according to user need like if the user's devices have large font-size than font-size of web pages also large.

For example, your android or ios device has base fonts-size like below

main heading - 18px secondary heading - 16px content - 14px

and your web main page Font-size is

main heading - 16px secondary heading - 18px content - 12px

Now I want to detect the android or ios device font-size to change my web page font size.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ — shrys, Jul 18 '19 at 11:39
@shrys I have already applied CSS with media queries but I am looking for font-size according to device font-size. — Dharmesh Mertwal, Jul 18 '19 at 11:40
Possible duplicate of [How to get the actual rendered font when it's not defined in CSS?](https://stackoverflow.com/questions/7444451/how-to-get-the-actual-rendered-font-when-its-not-defined-in-css) — A. Meshu, Jul 18 '19 at 11:41
@A.Meshu I tried this but did not working for mobile to get the information. — Dharmesh Mertwal, Jul 18 '19 at 11:46

score 0 · Answer 1 · answered Jul 18 '19 at 11:57

0

(continuation from comments above).

var div = document.getElementsByTagName('body')[0]; // this will set the body tag as variable
// this taken from here: https://stackoverflow.com/a/7444724/6525081
function css( element, property ) { 
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}
alert( css( div, 'font-size' ) );

Read more about getComputedStyle here

You can check similar fiddle here

Hope that helps.

answered Jul 18 '19 at 11:57

A. Meshu

4,053
2
20
34

Yes, I have tried this. This code will get the font-size of particular div or element, I am asking about my device native font size. – Dharmesh Mertwal Jul 19 '19 at 04:00
Using this code will get you the initial font-size that all elements will render from (the body of the document - as the browser display it). Once you have it you can decide what to do with it. What is your goal? If it will be 16px - than what? – A. Meshu Jul 19 '19 at 18:10

score -3 · Answer 2 · edited Jul 18 '19 at 11:54

-3

you should use media queries, this command is for you to define specific styles for certain screen sizes, follow a tutorial on how to use

Example:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Complete tutorial here

in case you want to change the source according to the size of the device source use the rem

it is a measure that takes as a base the size of the font configured in the browser

Example:

div{
   font-size: 1rem
}

Here's the rem tutorial

edited Jul 18 '19 at 11:54

Dharmesh Mertwal

49
1
9

answered Jul 18 '19 at 11:39

Lucas

275
8
37

Thank you but **I have already applied CSS with media queries but I am looking for font-size according to device font-size** – Dharmesh Mertwal Jul 18 '19 at 11:43
just use rem as described in the answer – Lucas Jul 18 '19 at 12:15

Can we detect font size or font family in mobile device in web project?

2 Answers2