Detecting a mobile browser

Wise beyond user agents: Additional detection techniques

The user agent approach is common and efficient, but isn't 100% reliable due to potential spoofing. Luckily, there are other browser features to enhance our mobile detection.

Touching the untouchable — Identifying touch capabilities

Touch interaction is almost exclusively a mobile affair. We can examine 'ontouchstart' in the window or navigator.maxTouchPoints to sniff out these nifty touch devices:

// Infinite possibilities at our fingertips. No really, is it touch-screen or not?
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;


Screen politics — Understanding screen orientation status

While screen.orientation has been largely boycotted by desktop browsers, it's a favourite amongst the smartphone elites. An absence suggests a likely desktop browser:

// Will it flip or not? That's a question!
const isMobileOrientation = 'orientation' in screen;


Friends in high places — Leveraging libraries

For a more robust solution, consider borrowing some wisdom from external libraries that specialize in this field:

// The 'isMobile' library: Not to be confused with an angsty existential question.
if (isMobile.any) {
  // Adjust UI for mobile
}


Remember, tech evolution is relentless. Keep your detection code fresh and exercise it on different devices regularly.

No two snowflakes — Tailoring detection to your needs

It's less about finding the perfect solution, and more about creating one that best fits your needs. Contemplate the mobile user experience you're aiming for and shape your detection logic accordingly.

Enhanced detection: A more comprehensive approach

Let's reinforce our methods to create a more reliable and nuanced detection system.

Knowing the crowd — Mapping device types

Finding out specific devices types can help provide a more personalised user experience:

// Are you an Apple 🍎 or an Android 🤖?
const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isAndroid = /Android/.test(navigator.userAgent);


Change is the only constant — Anticipating future changes

Keep your detection code readable and adaptable for those inevitable changes:

• With clean code, you can easily navigate through all your checks.
• Detailed documentation will help future you appreciate past you.
• Seek inspiration from widely used and vetted community solutions, like the Facebook’s Slingshot project.

Using the power of style — Employing media queries

CSS can be a valuable ally with media queries, providing responsive designs for different screen sizes:

@media only screen and (max-width: 768px) {
  /* Mobile makeover in place, folks. */
}


Expect the unexpected — Navigating through edge cases

Some tablets or hybrid devices may pose unusual challenges. To combat this unpredictability, design a hybrid solution combining JavaScript detection with CSS rules for a seamless, responsive experience.