title: How do I override window.screen?
body: <p>I'm writing a simple PhantomJS app that scrapes particular pages looking for patterns. In one of these pages, the owner of the site is reading the <code>window.screen</code> width/height properties and changing the URL on me (which is cancelling the loading of the rest of the page). Setting the <code>viewportSize</code> changes the width/height values of the window, but not of the <code>screen</code> object.</p>
  
  <h2>Attempt 1</h2>
  
  <p>My first step was disabling navigation, like so:</p>
  
  <pre><code>tab.onLoadStarted = function () {
      tab.navigationLocked = true;
  };
  </code></pre>
  
  <p>However, because this check is done in the <code>&lt;head&gt;</code>, it is causing the <code>load</code> event to fire, and sometimes the page hasn't fully loaded yet (which is causing lots of other issues).</p>
  
  <h2>Attempt 2</h2>
  
  <p>I tried overriding the screen object at the first load:</p>
  
  <pre><code>tab.onLoadStarted = function () {
      tab.evaluate(function () {
          window.screen = {
                  width: 1920,
                  height: 1080
              };
      });
  };
  </code></pre>
  
  <p>However, that property is read-only, so setting it does nothing to change the value.</p>
  
  <h2>tl;dr</h2>
  
  <p><strong>In PhantomJS, is there a way to override the <code>window.screen</code> value to set my own screen size?</strong></p>