Change css if device is on mobile

Question

I've already performed media queries for different screen sizes, but I want to have different css if the website is viewed on mobile. So even if the screen is the same min-width on desktop and mobile, I want to have different css.

Any idea how I can do this?

Possible duplicate of https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used — spawnedc, Mar 07 '18 at 08:54
Possible duplicate of [How to load different css file depending on window width: smaller size not recognized](https://stackoverflow.com/questions/23071521/how-to-load-different-css-file-depending-on-window-width-smaller-size-not-recog) — AgeDeO, Mar 07 '18 at 08:55
Possible duplicate of [What is the best way to detect a mobile device in jQuery?](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) — giorgio, Mar 07 '18 at 08:56

score 2 · Answer 1 · edited Mar 07 '18 at 08:59

Could use userAgent?

loadUserAgent () {
  let UA = navigator.userAgent;
  if(UA.match(/Android/) || UA.match(/iPhone/) || UA.match(/BlackBerry/) || UA.match(/iPod/) || UA.match(/Windows Phone/) || UA.match(/iPad/) || UA.match(/webOS/)) 
  {
    this.isMobile = true;
  }
}

If you want to support other devices such as Blackberry, Opera Mini etc. Your going to have to add their user agents manually.

Change css if device is on mobile

1 Answers1