Resize Browser Window
Learn how to set and resize the dimensions of the browser window dynamically.
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.
The initial width of the browser window in pixels.
The initial height of the browser window in pixels.
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.
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.
The width of the browser window in pixels.
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.