1

I was looking at a list of the different resolutions of phones and tablets for CSS designers and I realized that some phones have huge resolutions and some tablets even have bigger resolution than most computers.

Now here's my problem: I have a little gadget on my page that makes the logo move a bit toward the mouse. It makes a nice effect on computers but would be useless on tablets and phones (and probably be a problem as I'm not sure whether or not the logo is properly centered originally without the mouse). I managed to disable it and replace it with the normal logo on small phones with media queries but is there a way for the page (through Jquery or whatever) to recognize if the user is on tablet and thus modify the page accordingly?

user7393973
  • 2,270
  • 1
  • 20
  • 58
François Malet
  • 99
  • 1
  • 3
  • 14
  • You can target with useragent string (not that accurate) or make use of CSS pixel-ratio media queries to target high res devices – Aziz Mar 02 '17 at 06:59
  • Define "tablet". My laptop has a touchscreen _and_ a mouse. That being said, there's [growing support for media queries aroundinput capabilities](https://googlechrome.github.io/samples/media-hover-pointer/) – Ulrich Schwarz Mar 02 '17 at 07:22
  • So you actually want to detect **mouse**, don't you? You don't want mouseless computers and you don't mind tablets with mouse. (Or maybe just rewrite the feature so it doesn't break if mouse never shows up.) – Álvaro González Mar 02 '17 at 12:34

1 Answers1

1

You could try to use a script from http://detectmobilebrowsers.com/. Its fairly easy to use. Also see: Detecting a mobile browser

Community
  • 1
  • 1
Rein
  • 93
  • 10