2

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)?

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.

  • It is always better to use one CSS file: e.g <link rel='stylesheet' href='style.css' type='text/css' media='all' /> and if you want the luxury of having easier administration using multiple files then use SASS. – Simon Hayter Feb 8 '18 at 19:32
  • @SimonHayter I wouldn't agree that it's "always better to use one CSS file" - while in this case it's true that the media queries are probably better off managed through SASS and a build process, with the move towards HTTP/2 it may be better to serve multiple smaller files as the connection overhead is reduced and more parallel requests can be handled. – Zhaph - Ben Duguid Feb 8 '18 at 19:40
  • @Zhaph-BenDuguid ~ I dunno what situation would ever make CSS more suitable in multiple files as demonstrated in this answer. The only ever time I would agree is using external CSS such as font awesome and Google fonts since these are cached on most people's machines before they even visit your site. So unless your site has massive CSS files that above the cache threshold on some older devices then I don't see the point. Less requests is better for the visitor and server regardless of HTTP/2 or not. – Simon Hayter Feb 8 '18 at 19:42
  • Yep, either for rather old, large CSS files, or moving to a more modular architecture where you only want to serve relevant content to your users. Sadly some larger sites I've worked on can have upwards of 70% "unused" CSS for any given page :( – Zhaph - Ben Duguid Feb 8 '18 at 19:47
  • But I agree that in this case it's unlikely that there will be much difference between the files to justify splitting them out. – Zhaph - Ben Duguid Feb 8 '18 at 19:48
-3

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

  • 1
    This is not a high quality answer. It is much more useful to write a few paragraphs here than to suggest that users search for answers. – Stephen Ostermiller Feb 6 '18 at 21:17
  • I've already given the answer. You don't need to write a few paragraphs on something so simple. – attachPost Feb 6 '18 at 21:41
  • Even simple questions deserve complete answers here. Good answers contain enough information that users don't have to look elsewhere. Good answers include references such as links to authoritative sources. Please edit your answer to expand it. – Stephen Ostermiller Feb 6 '18 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.