Displays

Overview 

MōBrowser provides the displays object for reading information about displays connected to the user’s device. You can use it to inspect the primary display, list all displays, position windows on a specific display, and react when displays are connected, disconnected, or changed.

import { displays } from '@mobrowser/api';

The displays API is available in the main process.

Primary display 

The primary display is the display where the operating system places new windows by default. You can get the primary display using the primary property:

import { displays } from '@mobrowser/api';

const display = displays.primary

if (display) {
  console.log('Primary display:', display.name || display.id)
  console.log('Work area:', display.workArea)
}

The primary property usually returns a Display object, but it can be null in headless environments or when the platform cannot report display information.

Listing displays 

To get all currently connected displays, use the all property:

import { displays } from '@mobrowser/api';

for (const display of displays.all) {
  console.log('Display:', display.name || display.id)
  console.log('Primary:', display.isPrimary)
  console.log('External:', display.isExternal)
  console.log('Bounds:', display.bounds)
  console.log('Work area:', display.workArea)
  console.log('Resolution:', display.resolution)
  console.log('Scale factor:', display.scaleFactor)
}

Each display includes the following information:

Display coordinates 

Display bounds and workArea use logical pixels. Use resolution when you need the physical pixel size of a display.

The workArea excludes operating system UI such as the taskbar, Dock, or menu bar. For most window positioning logic, use workArea instead of bounds so your window does not appear under system UI.

import { BrowserWindow, displays } from '@mobrowser/api';

const display = displays.primary

if (display) {
  const win = new BrowserWindow({
    position: display.workArea.origin,
    size: {
      width: Math.min(900, display.workArea.size.width),
      height: Math.min(700, display.workArea.size.height),
    },
  })

  win.show()
}

Display changes 

Display configuration can change while your application is running. A user can connect or disconnect a monitor, change resolution, change scaling, rotate a display, or switch the primary display.

Use display events to update your application state when this happens:

import { displays, Display } from '@mobrowser/api';

displays.on('displayConnected', (display: Display) => {
  console.log('Display connected:', display.name || display.id)
})

displays.on('displayDisconnected', (display: Display) => {
  console.log('Display disconnected:', display.name || display.id)
})

displays.on('displayChanged', (display: Display) => {
  console.log('Display changed:', display.name || display.id)
})

The displayChanged event is emitted when the display bounds, work area, resolution, scale factor, primary state, or other reported display information changes.

Window display policymacOS 

On macOS, you can control how a window behaves across Spaces using WindowDisplayPolicy. This is different from physical displays: it controls whether a window appears on one desktop, all desktops, or moves to the active desktop when activated.

import { BrowserWindow } from '@mobrowser/api';

const win = new BrowserWindow({
  windowDisplayPolicy: 'appearOnAllDesktops',
})

win.show()

You can also change the policy after the window is created:

win.setWindowDisplayPolicy('moveToActiveDesktop')

On Windows and Linux, this method does nothing.