How to increase font size only for desktop device

Question

Working on ASP.Net MVC project, I don't want to just say... looking for a way to detect mobile / desktop device. as on mozilla web site, they say ...your first step is to try to avoid it if possible. Start by trying to identify why you want to do it.

I searched and found a lot of answer but none of them are efficient or an official way to detect mobile device that's why I start with explaining why I need it.

First task given to me was to increase font size for the entire web site and I did it and it is working well using below code

    $(function increaseFont() {
    document.body.style.zoom = "150%"
});

now I got new requirement to decrease size to normal for mobile device only ... so I'm thinking of having a if conditional before the above JS function to detect if device is mobile or desktop.

Any idea please?

Answer 1

I would use standard media queries to change CSS properties. The code you're looking for would probably be something like the following:

@media only screen and (min-width: 768px) { /* Anything larger than a tablet */
  body {
   font-size: large; /* Increases every font size */
  }
}

For more information, you could check out the W3 Schools Website .

Hope that helps.

Answer 2

You can read out the window inner width with JavaScript.

This is probably the if condition you are asking for:

if (window.innerWidth > 768) {
   // do stuff for desktop devices
}

The value in the if condition determines the minimum required width (in px) of the viewport, to execute the code in its body.