How MEA Tools Automatically Adapts to Your Device

The baseline: a Samsung J2 Prime-class phone

This isn't an arbitrary baseline. The MEA team deliberately set the lowest device class as the heaviest reference point — equivalent to a Samsung J2 Prime, a phone with around 1.5GB of RAM and a quad-core processor that's a realistic picture of the "entry-level" devices still widely used by people. Rather than just testing on the development team's fast laptop and assuming everyone has a similar device, the baseline is instead the most modest device realistically used by actual users.

Three display tiers, chosen automatically

The moment a MEA Tools page opens, a small script runs immediately before the display even renders, and decides on one of three tiers (called "tier" in the code): Low (Efficient), Mid (Balanced), or High (Full). This tier is purely about visuals — glow effects, animations, gradients, and the like — not about reduced tool functionality. The tools remain fully functional at any tier; what changes is only how "heavy" the visual decoration is.

The decision uses several signals the browser can read:

• Device RAM (if the browser allows reading this info) — 2GB or below automatically lands in the Efficient tier.
• CPU core count — used as the main signal on browsers that don't expose RAM info (like Safari), and as an additional filter on other browsers.
• Data-saver mode or reduced-motion already enabled by the user in their system or browser settings — if this is on, MEA Tools respects it immediately and uses the lightest tier with no further questions.

Not just a one-time guess — actually measured too

Here's the more interesting part: this system doesn't just guess once at the start and call it done. Once the page starts being used — say, you scroll or touch the screen — an FPS (frames per second) measurement runs in the background, checking whether the animations are genuinely smooth on your device or actually stuttering.

If FPS is detected dropping below 40 two times in a row, the system automatically drops the display down one tier — from Full to Balanced, or from Balanced to Efficient — to keep the experience comfortable to use. Once dropped, a small notification appears saying "Visuals adjusted for your device's comfort," so you're not left confused about why the display suddenly changed.

There's one rule deliberately enforced strictly here: a tier can only drop automatically, never rise on its own without evidence. So once the system detects a device struggling and drops the display, it won't "try bumping it back up" quietly — that could create an annoying up-and-down experience. If you want to go back to the full display, that decision is left to the user's manual choice.

Detection results are remembered, not re-measured every visit

So you don't need to measure FPS from scratch every time you open MEA Tools, the automatic detection result is stored on your own device (via the browser's localStorage). So once the system knows your device fits better in the Efficient tier, your next visit immediately uses that tier from the start, with no need to wait for the measuring process again.

The FPS measurement itself also isn't done carelessly — it's only calculated while you're actually actively interacting (scrolling, touching, or moving the mouse), and stops when the tab isn't active. This prevents a page sitting idle from being judged "slow" when really there's nothing that needs rendering at that moment.

Why does this matter?

Many sites or web apps are built and tested on a fast development device, with the assumption that all users will have a similar experience. In reality, in Indonesia alone the range of devices people use for browsing is very wide — from the latest flagships to old phones with limited RAM. This adaptive system is how MEA Tools ensures the experience stays comfortable at either end of that spectrum, without having to build two separate versions of the site or force everyone to download the same heaviest display.