How to add additional iPad resolutions?

This documentation is valid for Activator version 2.5.0 and above.

In this article we will have a look at how we can support new iPad resolutions in the Activator top bar.

Possible resolutions to add:

JSON

{
  "device": "iPad 10.2inch",
  "width": "1080",
  "height": "810",
  "type": "tablet"
},
{
  "device": "iPad 10.5inch",
  "width": "1112",
  "height": "834",
  "type": "tablet"
},
{
  "device": "iPad 10.9inch",
  "width": "1180",
  "height": "820",
  "type": "tablet"
}

In some future release it will be possible to add any resolution you want, but for now it’s important that it’s exactly the ones above you add.

Add the configuration to src/config/app.json of the design system.

The configuration is called targetResolutions and here is an example with a complete configuration with all three resolutions added:

JSON

"targetResolutions": [
    {
      "device": "desktop",
      "width": "1280",
      "height": "720",
      "type": "general"
    },
    {
      "device": "tablet",
      "width": "768",
      "height": "1366",
      "type": "general"
    },
    {
      "device": "mobile",
      "width": "375",
      "height": "667",
      "type": "general"
    },
    {
      "device": "iPad",
      "width": "1024",
      "height": "768",
      "type": "tablet"
    },
    {
      "device": "iPad Pro 11inch",
      "width": "1194",
      "height": "834",
      "type": "tablet"
    },
    {
      "device": "iPad Pro 12inch",
      "width": "1366",
      "height": "1024",
      "type": "tablet"
    },
    {
      "device": "iPad 10.2inch",
      "width": "1080",
      "height": "810",
      "type": "tablet"
    },
    {
      "device": "iPad 10.5inch",
      "width": "1112",
      "height": "834",
      "type": "tablet"
    },
    {
      "device": "iPad 10.9inch",
      "width": "1180",
      "height": "820",
      "type": "tablet"
    }
  ]

After the configuration has been added, run npm run prod to build and generate a zip archive to drag to Activator in order to update design system.

$ npm run prod
…
Not able to read JSON (ignoring) ./src/config/responsive.json
Not able to read JSON (ignoring) ./src/config/menu.json
Not able to read JSON (ignoring) ./src/config/fonts.json
Not able to read JSON (ignoring) ./src/config/shapes.json
Files merged successfully into build/config.json
Config built to build/config.json
…
Exporting single folder .
Shared folder exported to exports/2023-11-08T12_48_03_734Z

If you see ignored JSON files like above, it’s not something to worry about. It just means that default settings will be used.