title: Dynamically change viewportSize in PhantomJS
body: <p>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:</p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>When run with <code>phantomjs script.js</code> this produces two identical PNG files <code>medium.png</code> and <code>small.png</code> at a width of 800px each. Expected behaviour was to have <code>medium.png</code> like this and <code>small.png</code> at a width of 630px. How can this be achieved?</p>
  
  <p>PS: <a href="https://stackoverflow.com/a/25354014/948404">This answer</a> to a similar question produces an error for me. Also <a href="https://stackoverflow.com/a/16746373/948404">the accepted answer</a> to that question suggests quite an ugly workaround I would like to avoid.</p>