Mobile app version of vmapp.org
Login or Join
Marchetta884

: How does a website recognize a smart phone? I noticed that certain websites have a different "appearance/layout" when they recognize a cellphone being used. How do they do this (preferably in

@Marchetta884

Posted in: #WebDevelopment #WebsiteDesign #WebsiteFeatures

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

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Marchetta884

2 Comments

Sorted by latest first Latest Oldest Best

 

@BetL925

In general there are two possibilities:


recognizing of the display width
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.

10% popularity Vote Up Vote Down


 

@Yeniel560

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme