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

The accessibility of an app built with Median primarily depends on the accessibility of your website. While features like Font Scaling are supported, most of the content rendered in the app is driven by your website and the accessibility practices implemented on your backend.

For the app's native components (e.g. Native Navigation), 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.

🚧

Note

Some third-party plugins with user interface components may not be fully accessible by default, but they can be customized to meet accessibility requirements.

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:

HTML

<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.

HTML

<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>