Skip to main content

Device-specific designs

ADITO includes an automatic optimization of its design, depending of the type of device on which it is used:

  • Desktop
  • Tablet
  • Mobile

Several ADITO models (e.g., Contexts or ViewTemplates) have a property named "devices", which allows you to control, on which of the 3 device types ADITO will be available.

For demonstration or testing purposes, you can also show the tablet-specific and the mobile-specific designs in your (Chromium-based) desktop browser.

Here is an example of showing the mobile-specific design in a Google Chrome or Microsoft Edge browser:

  1. Log out
  2. Close the browser tab in which ADITO had run
  3. Enter the basic URL of your ADITO system, adding the suffix "/mobile", e.g., https://myProject.dev.c2.adito.cloud/mobile
  4. Click key "F12"
  5. A developer window will appear. Here, click subsequently on
    • the three-dotted button (upper right corner) and choose "Dock side" > "Undock..." button
    • "Toggle Device toolbar" button (left upper corner of the developer window)
  6. Click key "F11"

If you want the tablet-specific design to be shown, proceed as described above, but use the suffix "/tablet" instead of "/mobile".

If you are done with testing, subsequently click the keys "F11" and "F12" again, in order to return to your normal (desktop-specific) browser usage.

note

Due to browser "cookies", you might have problems to return to the normal (desktop-specific) design, if you only enter the usual URL (e.g., https://myProject.dev.c2.adito.cloud/ or https://myProject.dev.c2.adito.cloud/client). This possibly still opens ADITO showing the tablet- or mobile-specific design (= the latest design that you had used). In these cases, repeat the above steps, using the suffix "/desktop".