How does a website recognize a smart phone?

Question

I noticed that certain websites have a different "appearance/layout" when they recognize a cellphone being used. How do they do this (preferably in a CSS, JS, and/or HTML context)?

Answer 1

In general there are two possibilities:

1. recognizing of the display width
2. recognizing of device

Media queries

In the first case it works like measuring of current display width (or other parameters, like height, orientation etc.) and serving a stylesheets and other assets, like javascripts and images specially for this width. The simplest case are three socalled breakpoints, like something about 1024px (desktop), something about 700 pixel (tablet), something about 300 pixel (mobile).

Typical CSS media query could look like:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

Media query could implement not only a rule, but a file too, like:

<link media="screen"
    href="/path/to/global.css" type="text/css" rel="stylesheet"/>
<link media="only screen and (max-width: 320px)"
    href="/path/to/touch.css" type="text/css" rel="stylesheet"/>
<link media="only screen and (max-width: 1024px)"
    href="/path/to/tablet.css" type="text/css" rel="stylesheet"/>
<link media="handheld"
    href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>

or

<link rel="stylesheet" media="all" href="cssbase.css" />
<link rel="stylesheet" media="(min-width: 672px)" href="csswide.css" />
<link rel="stylesheet" media="(orientation:landscape)" href="landscape.css">

The same media query done by javascript could look like:

if (screen.width >= 600) {
    // download complicated script
    // swap in full-source images for low-source ones
}

Device recognition

In the second case different site versions (desktop, tablet, mobile) are served after recognition of user agent, containing in browser request header. Typical desktop user agent looks like

User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Device recognition with javascript could happen like:

if (navigator.userAgent.match(/iPad/i) != null){ 
  css.href = "/c/dropkick.css";
  var h = document.getElementsByTagName('head')[0];
  h.appendChild(css);
}

or, with php, like:

<?php if(strstr($_SERVER['HTTP_USER_AGENT'], 'Chrome')) { ?>
    Chrome
<?php } ?>

In this case the bigger the list of user agents is checked, the exacter one can recognize the user agent. This fact forces maintaining of long user agent lists or an access to third-party lists and/or libraries, like mobile-detect.js.

Another point: user agent recognition should better happen on the server side - if on user side, it will fail if javascripts are off.

privat opinion :)

In my opinion the first possibility is working exacter as the second, because, specially on desktop and tablet devices user can manually change the display width.

But device recognition has its right to exist: with a kind of device recognition, like device pixel ratio one can recognize whether the site should serve retina-ready images.

Answer 2

By using the viewport meta tag in HTML and media queries in CSS. Looking for these keywords will bring up many useful tutorials.