viewport

Type: <object>

It sets browser visible area settings and device capabilities over the target url.

import mql from '@microlink/mql'

const { data } = await mql('https://en.wikipedia.org/wiki/Bob_Dylan', {
  screenshot: true,
  viewport: {
    width: 640,
    height: 400,
    deviceScaleFactor: 2,
    isMobile: true
  }
})

Establishing a custom viewport.

The default viewport values are provided by the default device. The viewport should be defined by:

width <number>: The page width in pixels
height <number>: The page height in pixels.
deviceScaleFactor <number>: Specify device scale factor.
isMobile <boolean>: Whether the meta viewport tag is taken into account.
hasTouch <boolean>: Specifies if viewport supports touch events.
isLandscape <boolean>: Specifies if viewport is in landscape mode.

If you just provide an incomplete set of viewport values, they will be merged with the default values:

import mql from '@microlink/mql'

const { data } = await mql('https://en.wikipedia.org/wiki/Bob_Dylan', {
  screenshot: true,
  viewport: {
    deviceScaleFactor: 0.5
  }
})

Using the default viewport with lower device scale factor.

See device for using viewport presets.

viewport

Interactive Code Editor

Interactive Code Editor