Hyperbeam home pagelogo
  1. Guides
  2. Resize Browser Window

Want to jump into the code? See our resize example.

​
Server

For a resizable browser window, you need to specify the following properties when creating a new browser instance.

widthDefault: 1280
number

The initial width of the browser window in pixels.

heightDefault: 720
number

The initial height of the browser window in pixels.

max_areaDefault: 1280*720
number

The maximum browser window area in pixels.
This limits the browser window size when resizing the window.

​
Client

To resize the browser window, call the resize function with the desired width and height.

Instead of calling the resize function on a drag event, call it on the dragend, mouseup, or touchend events.
This will prevent unnecessary calls to the server and improve performance.

​
hb.resize(width, height)

The resize method on the Hyperbeam client allows you to resize and reposition the browser window dynamically. This can be useful for creating a custom sized browser window for your app or adapting to different screen sizes.

widthRequired
number

The width of the browser window in pixels.

heightRequired
number

The height of the browser window in pixels.

​
hb.maxArea

The maxArea property on the Hyperbeam client stores the maximum browser window area in pixels. This is the maximum area that the browser window can be resized to, and is set by the max_area property when creating a new browser instance.

console.log(hb.maxArea); // 921600 (1280 * 720)

​
What if I want to resize the browser window to a larger size?

Though you cannot change the maximum browser window area once set, you can still achieve a closer approximation to the desired dimensions by resizing the browser window to the closest allowed dimensions and then scaling the browser window to the desired dimensions while maintaining the same aspect ratio.

// Desired dimensions (4:3 aspect ratio)
const desiredWidth = 1600;
const desiredHeight = 1200;

// Get the maximum area that the browser window can be resized to
// min(1600 * 1200, 1280 * 720)
const pixels = Math.min(desiredWidth * desiredHeight, hb.maxArea);

// Calculate the new dimensions with the same aspect ratio
const aspectRatio = desiredWidth / desiredHeight; // 4:3
const height = Math.floor(Math.sqrt(pixels / aspectRatio)); // 831
const width = Math.floor(height * aspectRatio); // 1108

// Resize the browser window to closest allowed dimensions
hb.resize(width, height); // 1108 * 831

// Scale the browser window to the desired dimensions
target.style.width = desiredWidth; // 1600
target.style.height = desiredHeight; // 1200

Want to jump into the code? See our resize example.