How to Detect Mobile Devices using CSS3?

If you have a mobile version of your website (also based on Joomla!) and it isn’t responsive/adaptive you may want to provide a note to the users if that version is more appropriate.

Once you have spent the time buling mobile templates you probably want to make sure that your readers on smartphones see those designs. There are many ways how to detect mobile devices, some work better than others. This time I’ll present you a very simple CSS3 solution created by Ian Hansson (Twitter: @teapoted). If somebody will resize screen below 900px will see a note “Hey! We also have a mobile version” on the top of page.

This code is easy to get working; all you need is a little CSS3 and HTML enabled. To index.php file of your main (Joomla!) template on the bottom add:

     .mobile-note {
    text-align: center;
    top: 0;
    left: 0;
    background: #ddd;
    margin: 0 5%;
    width: 80%;
    padding: 3% 5%;
    position: fixed;
    display: none;
    opacity: 0.7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 1px 1px 3px #bbb;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
     }

     .mobile-note:hover {
    opacity: 1;
     }

     @-webkit-keyframes hide { 
    0% { opacity: 0; margin-top: 10%; border-radius: 10px; } 
    10% { opacity: 1; } 
    60% { opacity: 1; margin-top: 10%; border-radius: 10px; } 
    100% { opacity: 0.7; margin-top: 0; } 
     }

     @-moz-keyframes hide { 
    0% { opacity: 0; margin-top: 10%; border-radius: 10px; } 
    10% { opacity: 1; } 
    60% { opacity: 1; margin-top: 10%; border-radius: 10px; } 
    100% { opacity: 0.7; margin-top: 0; } 
     }

@media only screen and (max-width: 900px) {

    .mobile-note {
      display: block;
      -webkit-animation-name: hide;
      -webkit-animation-duration: 2s;
      -moz-animation-name: hide;
      -moz-animation-duration: 2s;
    }

Than you and rest of people will see:

mobile css3

if somebody resize screen area and may be redirect to a mobile URL with one click.

Others open source mobile phone detection scripts uses PHP, ASP, JSP. This is a much better way to redirect mobile users to a mobile version of the site, because it doesn’t rely on a CSS3 that the mobile device doesn’t use.