Guerrilla Guerrilla -4 years ago 177
Javascript Question

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?

Answer Source

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();
});

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download