Geonode Logo light

Viewport

viewport: object;

What's This?

The viewport option lets you define the size and features of the virtual browser window that the Scraper uses. By adjusting these settings, you can emulate how a webpage looks and behaves on different devices or screen sizes, ensuring accurate scraping and screenshot captures.

Properties

  • width:Sets the width of the virtual browser window in pixels.
  • Default is 1280.
  • height: Determines the height of the virtual browser window in pixels.
  • Default is 800.
  • deviceScaleFactor:(Optional)  Defines the device scale factor, which can be thought of as the device pixel ratio (DPR). Adjusts the pixel density of the virtual display, similar to how some devices have high-resolution "Retina" displays.
  • Default is null.
  • isMobile:(Optional)   When true, the Scraper emulates a mobile device, which might adjust how some web pages appear.
  • Default is null.
  • hasTouch:(Optional)  If true, the Scraper will emulate a device that supports touch interactions, like a smartphone or tablet.
  • Default is null.
  • isLandscape:(Optional)  When true, the Scraper emulates a screen in landscape (horizontal) orientation.
  • Default is null.

How Does it Work?

  • Example: If you set viewport= {width: 1024, height: 768, isMobile: true, hasTouch: true}, the Scraper will interact with web pages as if it's using a touch-enabled mobile device with a screen size of 1024x768 pixels.

When Should I Use This?

Activate the viewport option when you want to emulate specific devices or screen sizes. This is particularly useful for ensuring web pages display correctly for your intended audience, or when capturing screenshots that reflect a particular device's view.

Methods

setViewport(viewport: Viewport) 

Configuration Name: viewport 

Use this to set the browser's viewport.

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

const viewport = { width: 150, height: 150, deviceScaleFactor: 1, isMobile: true, isLandscape: true, hasTouch: true };
scraper.setViewport(viewport);
scraper.scrape('https://example.com/');

Using Configuration Object

const viewport = { x: 150, y: 150, width: 200, width: 200, scale: 1 };
const config = { viewport: viewport };
scraper.scrape('https://example.com/', config);

setViewportSize(number?, number?) 

Configuration Name: viewport.width || viewport.height 

The page width and height in pixels.

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

scraper.setViewportSize(1920, 1080);
scraper.scrape('https://example.com/');

Using Configuration Object

const config = { viewport : { height: 1920, width 1080} };
scraper.scrape('https://example.com/', config);

setViewportDeviceScaleFactor(number) 

Configuration Name: viewport.deviceScaleFactor 

The device scale factor, which can be thought of as the device pixel ratio (DPR).

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

scraper.setViewportDeviceScaleFactor(1);
scraper.scrape('https://example.com/');

Using Configuration Object

const config = { viewport: { deviceScaleFactor: 1 } };
scraper.scrape('https://example.com/', config);

setViewportIsMobile(boolean) 

Configuration Name: viewport.isMobile 

If set to true, the meta viewport tag will be taken into account when rendering the page.

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

scraper.setViewportIsMobile(true);
scraper.scrape('https://example.com/');

Using Configuration Object

const config = { viewport: { isMobile: true } };
scraper.scrape('https://example.com/', config);

setViewportHasTouch(boolean) 

Configuration Name: viewport.hasTouch 

If set to true, the viewport will support touch events.

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

scraper.setViewportHasTouch(true);
scraper.scrape('https://example.com/');

Using Configuration Object

const config = { viewport: { hasTouch: true } };
scraper.scrape('https://example.com/', config);

setViewportIsLandscape(boolean) 

Configuration Name: viewport.isLandscape 

If set to true, the viewport will be in landscape mode.

Initializing Scraper

const GeonodeScraperApi = require('geonode-scraper-api');
const scraper = new GeonodeScraperApi('<Your_username>', '<Your_password>');

Using Method

scraper.setViewportIsLandscape(true);
scraper.scrape('https://example.com/');

Using Configuration Object

const config = { viewport: { isLandscape: true } };
scraper.scrape('https://example.com/', config);