Dynamically change viewportSize in PhantomJS - phantomjs

Question

In order to have PhantomJS create screenshots of a page at different viewport widths, I'd like to adjust it dynamically. This does not work, though:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.render('small.png');
phantom.exit();
});
When run with phantomjs script.js this produces two identical PNG files medium.png and small.png at a width of 800px each. Expected behaviour was to have medium.png like this and small.png at a width of 630px. How can this be achieved?
PS: This answer to a similar question produces an error for me. Also the accepted answer to that question suggests quite an ugly workaround I would like to avoid.

Answer 1

I think it should be possible to set the viewport size and open the page again like this:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.open('http://example.com', function (status) {
page.render('small.png');
phantom.exit();
});
});