Settings

Display Devices

The Display Devices section lets you define predefined screen sizes for various target devices.
This allows you to create device-specific layout variations for the same Page, without duplicating it.

Purpose and Advantage

When creating a new Page, you can already define a fixed layout (e.g. [code_block_0] for desktop).
So why would you need Display Devices as well?

→ Because they allow you to render the same Page differently depending on the device used.

With Display Devices, you can:

  • Show many complex controls for desktop
  • Display the same Page on a phone – but in a reduced, optimized layout

You are not switching Pages – only layout, structure, and visibility of controls, based on the selected device.

Practical Example

  1. Create a Page with layout [code_block_0] for desktop
  2. Create a Display Device [code_block_2]
  3. In the Page editor, click the device icon (laptop + smartphone)
  4. Select "iPhone 15 Pro" and visually redesign the Page:
    • Remove unnecessary controls
    • Use larger buttons
    • Reorder content
    • Apply touch-friendly logic

Result:
One Page – one layout for each device.
Same Page, different view depending on device.

Creating a Display Device

  1. Click +New
  2. Enter:
    • Name (e.g. "iPhone 15 Pro", "WP400 7inch")
    • Width (CSS px, e.g. [code_block_3])
    • Height (CSS px, e.g. [code_block_4])
    • Optional: Min-Width / Max-Width

Example values:

  • iPhone 15 Pro: [code_block_5]
  • WP400 (7", physical 1024×600 px): recommended [code_block_6] CSS px

Using It in the Editor

  1. Open any Page
  2. Click the device icon (top left)
  3. Choose one of your configured devices
  4. Adjust layout and controls for this specific viewport

These changes apply only to the selected Display Device – others are unaffected.

Notes

  • Essential for responsive designs in PLCVisu
  • Especially valuable for:
    • Static containers
    • Resizable layouts with device-optimized variants
    • Device-specific logic and display
  • Saves you from having to create separate Pages for each device