Changing text size based on the device

Question

I need to make code which changes the size of the text when the user is using a mobile device. My code is:

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|   Opera Mini/i.test(navigator.userAgent)) {
  document.getElementById("link").style["font-size"] = "120%";
}

It doesn't work but I can't understand where the problem lies

https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device — Shafiqul Islam, Jun 19 '20 at 14:57
You may be better off thinking of things in terms of screen dimensions, rather than whether or not the device is mobile! — Gershom Maes, Jun 19 '20 at 14:57
Checking the screen size would be more effective than user agent: https://css-tricks.com/snippets/css/fluid-typography/ — Hunter McMillen, Jun 19 '20 at 14:57
Does this answer your question? [Font size relative to the user's screen resolution?](https://stackoverflow.com/questions/11777598/font-size-relative-to-the-users-screen-resolution) — harish kumar, Jun 19 '20 at 15:53

score 0 · Answer 1 · answered Jun 19 '20 at 15:20

As someone commented on your question, you might be better off using Media Queries to check for device screen-size :

@media only screen and (max-width: 500px) {
  p {
    font-size: 0.5rem;
  }
  
  h1 {
    color: blue;
  }
}

<h1> My Paragraph </h1>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod excepturi maiores saepe maxime dolores debitis eos sint quidem, enim consequatur. </p>

Try opening this code in a full window browser, then make the window smaller. Whatever CSS styling you add into this media query will be applied whenever the screen is 500px or shorter.

score 0 · Answer 2 · answered Jun 19 '20 at 15:31

You mean Responsive Text!, here is the easy solution of that

run the below code and then make it full page and then try to resize your browser

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>


</body>
</html>

Changing text size based on the device

2 Answers2