Platform notes
Fonts, text size, accessibility, images and layout on a phone, and the few places where a screen can differ from the editor preview.
A screen is laid out with the same rules as the web renderer, and the Mobile SDK's layout is checked against the web renderer's output on a shared set of test screens. These notes cover what is specific to a phone.
Fonts
iOS and Android cannot read web font files. Fonts you pick from the Miniwall catalog in the editor are downloaded to the device as TrueType files, cached, and used at the weight the screen asks for. The download happens before the screen shows (preload does it ahead of time). If a font cannot be downloaded the screen uses the system font at the same weight. A font name that is not in the catalog also uses the system font.
On Android versions before 8.0 (API 26) variable fonts show at their default weight.
Text size
Text follows the system text size (Dynamic Type on iOS, font size on Android) up to 1.6 times, set by maxFontScale in configure (1 turns it off). Line height stays 1.5 times the size, like the web. A box with a fixed height does not grow, so large text can be clipped inside it. Leave room in the design, or set the height to auto in the editor.
Accessibility
- VoiceOver and TalkBack read text, buttons with their labels, the selected package, toggles and carousel pages ("Page 2 of 3").
- A continue button that waits for a required answer is read as dimmed (iOS) or disabled (Android).
- Decorative icons and background images are hidden from screen readers. Give a button that only shows an icon a name in the editor: the name is read as its label.
- Animations follow the system setting for reduced motion.
Images and layout
- Text uses the system's text engine, so a line can wrap at a different word than in the editor preview, and a text block's height can differ by a fraction of a line.
- An image set to fit without a fixed width takes its width from the image file; on the web this can differ in a few rare layouts.
- Icons are drawn as vector shapes in one colour.
- The keyboard may cover a text field at the bottom of a screen; the screen does not scroll to the field yet.
- A carousel with Loop goes from the last page back to the first with a reverse slide.
Network
Screens work offline from the last copy. Events wait on the device until there is a connection. See Preload and sources and Events and privacy.