Menu
← All posts

HTML5 compatibility on mobile and tablet browsers

· HTML, Mobile, Browsers

First appeared on mobifreaks.com · Updated

While building mobile web templates for Mobifreaks, we had to keep track of which phone browsers supported which HTML5 features. In 2012 that list was long: iOS Safari, the Android browser, Opera Mini, Opera Mobile, BlackBerry, Nokia's browsers, Windows Phone's IE, and more, each with its own gaps.

My go-to reference was Maximiliano Firtman's comparison table at mobilehtml5.org, which tested each feature on each mobile browser.

What changed

The mobile browser landscape shrank to three engines:

  • WebKit: Safari on iPhone and iPad. On iOS, every browser has used WebKit, though the EU now allows other engines there.
  • Blink: Chrome, Samsung Internet, Edge, Opera and most other Android browsers.
  • Gecko: Firefox on Android.

Mobile and desktop versions of the same engine now support nearly the same features, so a separate mobile compatibility table isn't needed any more.

How I check support today

  1. Look for the Baseline label. MDN pages and web.dev mark features as Baseline "newly available" (works in all major browsers) or "widely available" (has worked everywhere for at least two and a half years). Widely available features are safe to use without a fallback.
  2. Check Can I use for the details, including the mobile browsers and the share of users each version has.
  3. Test on a real phone. Remote debugging lets you inspect a page on your phone from your computer: Safari's Develop menu for iPhone, and chrome://inspect for Android.
  4. Use feature detection for anything new: @supports in CSS, or checking for the API in JavaScript before calling it.
@supports (container-type: inline-size) {
  .card-list { container-type: inline-size; }
}
if ('share' in navigator) {
  // use the Web Share API
}