Veteran Owned & Operated
With the dawn of CSS3 and responsive design we entered the world of media queries. Media queries allowed us to adjust our css based on the viewport size that a user was viewing the site from.
Using this method we could show or hide content based on the browser size that was detected.
But using this approach, all the HTML is still loaded, even if it’s not visible to the user. What if we wanted to never load certain content at all based on the browser being viewed?
I needed to accomplish this on a recent project where the client wanted to load 30-40 pictures in a bxSlider for desktop browsers and only 10 pictures per bxSlider in mobile browsers.
So I started looking for a way to accomplish this and stumbled across Mobile Detect.
Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
In other words, it allows us to conditionally load content in mobile phones, tablets or desktop browsers. You can even target specific mobile browsers such as iOS and Android.
Check it out for yourself. Enjoy!
Leave a Reply