Code:Mobile phone detection

Example webpage to detect mobile phones in a webbrowser.

<!DOCTYPE html>  Mobile test    .box1 { background: red; }  .box1 { background: green; } .box1::after { content: "media=handheld"; }

 .box1 { background: yellow; } .box1::after { content: "media=screen,projection,tv"; }  .box1 { background: blue; } .box1::after { content: "media=print"; }

 .box2 { background: red; }  var newcss = document.createElement('style'); newcss.type = 'text/css'; if (screen.width >= 800) { newcss.innerHTML = ".box2 { background: yellow; }\n.box2::after { content: \"screen.width="+screen.width+"\"; }\n"; } else { newcss.innerHTML = ".box2 { background: green; }\n.box2::after { content: \"screen.width="+screen.width+"\"; }\n"; }       newcss.innerHTML += ".box3::after { content: \"device.width="+device.width+"\"; }\n"; document.getElementsByTagName('head')[0].appendChild(newcss);  .box3 { background: red; } @media (max-device-width: 799px) { .box3 { background: green; } }       @media (min-device-width: 800px) { .box3 { background: yellow; } }

 .box4 { background: red; }

Mobile detection

This page has different layout based on the detection of browser on a mobile device  The default background colour is red The background colour for mobile phones is green

The background colour for colour monitors, projectors and televisions is yellow</li> The background colour for printed pages is blue</li> </ol>

Media selector:

Javascript screen width:

CSS max-device-width media query:

<?php

$ua = $_SERVER['HTTP_USER_AGENT']; if (preg_match('/\b(\/MIDP|Mobile|IEMobile|Fennec|Opera Mini|Opera Mobi)\b/i', $ua)) { $style = "background: green;"; } else { $style = "background: yellow;"; }

?> <p class="box4"<?php echo " style=\"$style\""; ?>>HTTP User Agent: <?php echo $ua; ?>