viewportSize seems not to work with PhantomJS - viewport

Question

Shouldn't the output from this PhantomJS script be 240x320 pixels? I'm getting a large, default-sized image. clipRect() would seem to render the correct size image, but I need the responsive content of the page to reflect the actual browser window size.
var page = require('webpage').create();
page.viewportSize = { width: 240, height: 320 };
page.open('http://cnn.com', function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
page.render('default.png');
phantom.exit();
}, 200);
}
});

Answer 1

This works!!
Found the snippet on the github page of the issue.It forces the 'body' element to the page viewportSize:
var width = 1024;
var height = 768;
var webpage = require('webpage');
page = webpage.create();
page.viewportSize = {width: width, height: height};
page.open('http://harness.io', function(status) {
console.log(status);
page.evaluate(function(w, h) {
document.body.style.width = w + "px";
document.body.style.height = h + "px";
}, width, height);
page.clipRect = {top: 0, left: 0, width: width, height: height};
page.render('/tmp/test.png');
phantom.exit();
});

Answer 2

This is a known issue but I found a workaround:
Load the page into an iframe of whatever size you like.
Render a screenshot clipped to the rectangle of the iframe.
There is code to do it in this repository: https://github.com/jbeuckm/Splasher

Answer 3

This seems to work in the Mac binary for 1.9.7:
page.set('viewportSize', {width: 320, height: 480});

Answer 4

In CasperJS, I dealt with this issue, used the above method(s), and ultimately found it was unnecessary (at least for me, in CasperJS) once I set the single viewport options via the casper.viewport() method.
I've posted my version below, so you can see how it could work with many urls at once.
// Requires node.js and casperjs (npm install casperjs)
var casper = require('casper').create();
var root_dir = 'screenshots/';
var links = [];
var root = 'http://localhost:8001/';
var DEBUG = false;
var opts = {top: 0, left: 0, 'width': 1280, 'height': 1024};
function getHrefs() {
// Taken wholesale from casperjs
// http://docs.casperjs.org/en/latest/quickstart.html
var links = document.querySelectorAll('.days li > a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
function captureLinks(links) {
casper.echo('= SCREEN CAPTURING LINKS ====');
casper.each(links, function(self, link) {
var filename = root_dir + link.replace('/index.html', '') + '.png';
casper.echo('Capturing... ' + filename);
// Relevant code...
this.viewport(opts.width, opts.height);
self.thenOpen(root + link, function() {
// slight delay for external libraries and init loading
this.wait(500, function(){
this.capture(filename, opts);
});
});
});
}
casper.start(root, function() {
links = links.concat(this.evaluate(getHrefs));
this.echo('= GETTING LINKS ====');
if(DEBUG) this.echo(links.join('\n'));
captureLinks(links);
});
casper.run();