CODEWITHSUNDEEP
javascriptphantomjs
Guerrilla
Guerrilla

Reputation: 14926

Screenshotting mobile site in PhantomJS

I am using this script to take a screenshot of what I want to be the mobile site at the dimensions of an iphone:

var system = require('system');
var args = system.args;

var page = require('webpage').create();

page.open(args[1], function () {

    page.viewportSize = { width: 414, height: 736 };

    page.clipRect = { top: 0, left: 0, width: 414, height: 736 };
    page.render(args[2]);
    console.log(args[2]);
    phantom.exit();
});

On some sites this seems to work but on other sites it incorrectly shows what it actually looks like.

For instance, here is what it generates for Google:

enter image description here

Google obviously have a mobile site so where am I going wrong?

Upvotes: 2

Views: 392

Answers (2)

winner_joiner
winner_joiner

Reputation: 14880

It has to do with the UserAgent

here information on how to set it: http://phantomjs.org/api/webpage/property/settings.html

This Code Works for me:

var system = require('system');
var args = system.args;

var page = require('webpage').create();

page.settings.userAgent = 'Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30';

page.open("http://www.google.com", function () {

    page.viewportSize = { width: 414, height: 736 };

    page.clipRect = { top: 0, left: 0, width: 414, height: 736 };
    page.render("./test.jpg");

    phantom.exit();
});

Upvotes: 2

brightDot
brightDot

Reputation: 339

When I debug, the Google.com page has min-width specified. So, even if you resize the page inside Phantom, Google.com page will continue to render with min-width.

It will be same for even other sites that have min-width specified.

enter image description here

Upvotes: 0

Related Questions