0

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?

GirlCode
  • 85
  • 7

2 Answers2

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.

Tim VanH
  • 46
  • 4
  • Thanks Tim VanH. The rest is working fine but I'm now more concerned about the **iPad Pro (10.5 inch)** which has **834 * 1112** and **Kindle Device (800 * 1280)** view port as seen on my browser **Firefox Responsive Design Mode.** Their view port is larger than **768** you mentioned. _Not sure if there are considered Mobile devices or Not ?_ – GirlCode Apr 17 '20 at 11:18
  • Either should be fine. They are counted as tablets, which makes them rather ambiguous corner-cases (in my experience). If you want to exclude them from increasing the font-size, just adjust `min-width` to 835. – Tim VanH Apr 17 '20 at 16:58
  • Thanks a lot Tim VanH – GirlCode Apr 17 '20 at 20:04
0

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.

Felix Schildmann
  • 574
  • 1
  • 7
  • 22
  • On [this link](https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730) they say do not reply upon **window.innerWidth for detecting mobile devices.** it's a hidden comment. – GirlCode Apr 17 '20 at 10:07