Detect mobile devices and display a lightbox

Question

My issue: How can I detect mobile devices and display a light-box on page load with some information about the site? Thanks a lot!

Answer 1

With javascript you can detect mobile browsers:

<script>

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    //the code to display the light-box goes here...
}

</script>

Answer 2

Here you will find one very nice and full PHP library which will detect Mobiles / Tablets / Desktops for you:

https://github.com/serbanghita/Mobile-Detect

There is Stand alone file library and a Namespaced library.. Your choice is what to use.

Answer 3

When a user request a resource from a server, that user will pass information about their selves. If you want to use this information in PHP you can access it through the $_SERVER superglobal variable. From there you can populate the html document with what information you want.

If you want to use a php library to help you with this one I came across is

https://github.com/serbanghita/Mobile-Detect

You might also look into doing it all in javascript. It will totally depend on your needs.

Answer 4

whats wrong about using a media query?

the box will be displayed if the browser-width is smaller than 800px. dont check user-agents, what if the user opens your site in the facebook-browser on a smartphone? you can't be 100% save if checking the user-agent, so don't do it ;)

.info-box {
    display:none;
}

@media (max-width: 800px) {
    .info-box {
        display: block;
    }
}