CODEWITHSUNDEEP
javascriptphantomjscasperjs
Anthony Astige
Anthony Astige

Reputation: 1969

How can I generate high DPI mobile-like screenshots with CasperJS/PhantomJS?

I can set the viewportSize to get small mobile layout & sized screenshots:

// 1080 x 1920 is Nexus 5 resolution
casper.options.viewportSize = {width: 1080 / 3, height: 1920 / 3};

However the DPI is low, unlike when viewed on mobile.

Related info

My page uses the viewport meta tag to control layout on mobile browsers like so

<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

Upvotes: 1

Views: 367

Answers (2)

Anthony Astige
Anthony Astige

Reputation: 1969

What we really need is to set the Device Pixel Ratio. It appears as of July 2016, PhantomJS is lacking that ability, however people are working on it.

Upvotes: 1

Anthony Astige
Anthony Astige

Reputation: 1969

Keep full resolution, and use Casper's zoom

// 1080 x 1920 is Nexus 5 resolution
casper.options.viewportSize = {width: 1080, height: 1920};
casper.start().zoom(3)

This will probably fail under responsive designs with @media queries relative to screen size. I'm still hoping for a less hackish answer, but this at least gets us a little closer.

Upvotes: 0

Related Questions