App Interface Overview
App Interface settings control the functionality of your app, allowing you to optimize the app versus website experience for your users.
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 about 12 hours ago