Median.co HomeDeveloper PortalCreate New App
Documentation
Online TermsPrivacy Policy
Start typing to search…

App Interface Overview

App Interface settings control the functionality of your app, allowing you to optimize the app versus website experience for your users

App Interface settings in Median let you fine-tune how your app behaves and feels which is helping you bridge the gap between a responsive mobile website and a truly app-like experience. Control device orientation, brightness, gestures, font scaling, offline behavior, and more to optimize for mobile app-first users.

Supported Features

Device Screen Control

Manage screen brightness, orientation, size, and screen timeout behavior for a more polished and consistent user experience. Median supports setting defaults and updating screen settings at runtime.

📖 Learn more: Device Screen Control

Dark Mode

Configure Light or Dark mode by default on app launch, and dynamically switch themes at runtime based on user preferences or app state.

📖 Learn more: Dark Mode

Gestures

Implement mobile-friendly gestures like pull-to-refresh or swipe navigation to deliver a native app feel within your web-based app.

📖 Learn more: Pull-to-Refresh | Swipe Gestures

Font Scaling

Override device font settings by applying a custom font scale across your app. Use percentage values to increase or decrease text size relative to default styles.

📖 Learn more: Font Scaling

Offline Page

Show a custom offline page when users lose internet connectivity or built a full feature offline app using service workers or the native datastore.

📖 Learn more: Offline Page

Localization

Translate app content, native UI elements, and system prompts to support multiple languages. Ensure your app is accessible to a global user base through full localization support.

📖 Learn more: Localization

Accessibility and WCAG Compliance

Apps built with the Median platform primarily render your existing website inside a native WebView on iOS and Android. As a result, the accessibility and WCAG compliance of a Median app is largely determined by the accessibility of the underlying website.

How Accessibility Works in Median Apps

Median apps load your website directly inside a native WebView. HTML semantics, ARIA attributes, focus behavior, contrast, and screen-reader support are inherited from your website in the same way they are when accessed via a mobile browser.

Assistive technologies such as VoiceOver (iOS) and TalkBack (Android) interact with the WebView content using standard web accessibility APIs.

If your website conforms to WCAG 2.1 or 2.2 AA, that level of compliance generally carries over to the web content displayed inside the Median app.

Native UI Components

Median allows you to add native UI elements such as navigation controls or system dialogs depending on your app configuration and we have included basic accessibility labels to provide a foundational level of compliance with accessibility standards. These components also follow Google’s Material Design and Apple’s Human Interface Guidelines for improved accessibility support.

Third-Party Content and Plugins

Accessibility compliance may be affected by:

  • Third-party JavaScript libraries
  • Embedded widgets or media players
  • Custom plugins or features integrated via the Median JavaScript Bridge

These components are not automatically audited for accessibility and must be tested independently to ensure they meet WCAG requirements. Plugins created by Median can be customized to meet accessibility requirements.

Important Considerations

WCAG compliance is not guaranteed solely by using the Median platform. You are responsible for:

  • Ensuring your website meets WCAG requirements
  • Testing accessibility within the actual app environment
  • Verifying screen reader behavior, focus order, touch target sizes, and zoom behavior on real devices

Recommended Accessibility Checklist

  • Design and test your website to meet WCAG 2.1 or 2.2 AA standards.
  • Test the wrapped app using:
    • VoiceOver on iOS
    • TalkBack on Android
  • Review any native UI elements enabled in your app configuration.
  • Re-test accessibility after adding plugins, native features, or major UI changes.

Frequently Asked Questions

How do I fix display scaling and prevent zooming?

One of the most glaring UI issues that comes with viewing a website in a mobile app is the scale of the content on the page. When not correctly configured users will have to zoom in to fill out fields, read/watch content or click buttons. To remedy this, ensure that text and UI elements are set to a suitable size, fix the display scaling at 1:1, and prevent zooming by the user. This will result in the smooth user experience expected within a native app.

To fix the display scaling and prevent zooming on your website add the following meta tag to each page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

How do I prevent text selection in my app?

Preventing selection of text on your web pages when they are being presented within your app will result in a more app-like experience for users. This is particularly true for UI elements such as buttons.

We recommend adding the CSS below to each page. Change body and a to the elements you wish to target.

<style>
 body, a{
   -webkit-touch-callout: none !important;
   -webkit-user-select: none !important;
   -khtml-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
   user-select: none !important;
   -webkit-tap-highlight-color: transparent !important;
 }
</style>

Updated 15 days ago

Next Steps