What type of device is viewing my site?

Question

Hi i am trying to make a responsive website, and i want to find a way to check whether the device viewing the page is a pc, tablet or phone.

So far, the only solution i could find was variations of this:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

Correct me if i'm wrong, but the difference in pixel-density in devices is so big, that this can't guarantee anything, and it would also require regular updates based on the development of new screens with higher pixel-density.

I was hoping there was a function that could give you the screens size in real physical inches, or a variable you could call, that would tell you what type the device is.

The goal is to have a piece of code, that i never have to update, but just works no matter the type of device. I'm up for any language, but i'm best at html, css and javascript.

Thank you in advance!

Answer 1

You could use media-queries: media-queries or try: responsive webdesign via media-queries @ stackoverflow

Answer 2

I found a simple way to do this. I added this code in the header of my desktop site:

if (screen.width <= 800)
{
    window.location.href = "http://www.sandbergcykler.dk/mobile/";
}

If a device with a width smaller than 800 pixels enters, it's redirected to a mobile-friendly version of the website. On my mobile site i did the opposite, just in case a desktop-device should visit it:

if (screen.width >= 801)
{
    window.location.href = "http://www.sandbergcykler.dk/";
}

This method will get deprecated when phones start to get really high screen-resolutions, but so far it is working surprisingly well!

You can test it on your own device if you would like to:

if (screen.width <= 800) {
  document.getElementById("p").innerHTML = "You're a mobile";
}

if (screen.width >= 801) {
  document.getElementById("p").innerHTML = "You're a desktop";
}

<p id="p"></p>