Spoofing / faking screen-resolution?

Question

While browsing the web, I need to fake my screen resolution to websites I'm viewing but keep my viewport the same (Chrome's or FF's emulating doesn't solve my problem).

For instance, if I go to http://www.whatismyscreenresolution.com/ from a browser in full screen mode which has 1920x1080px resolution I want that site to think I am using 1024x728px but still be able to browse in full screen mode.

One of my guessess is I need to override js variables screen.width and screen.height somehow (or get rid of js completely but the particular site won't work with js disabled), but how? And would that be enough?

It's for anonymous purposes I hope I don't need to explain in detail. I need to look as one device even though I am accessing the site from various devices (Tor browser not an option - changes IP). The browser I'm using is firefox 30.0 and it runs on VPS (Xubuntu 14.04) I'm connecting to remotely.

This thread (Spoof JS Objects) brought me close but not quite enough, it remains unanswered. I've struggeled upon this question for quite a long time so any recommedation is highly appreciated!

Answer 1

The site you provided uses the following Javascript to determine which width/height values to show:

    height = screen.height;
    width = screen.width;

    res = document.getElementById ('resolutionNumber');
    res.innerHTML = width + " X " + height;

If all you care about is ensuring that these values change, you can do the following before their code is executed:

    screen = new function() { this.width = 1; this.height = 2 }

If you care about other attributes of the screen object, you'll need some extra Javascript to preserve those.

To see this in action, load their page, then use Firefox or Chrome dev tools to put a debugger in their Javascript (line 116, where it says height = screen.height;), execute the above override, then press play!

If you want to do this for every page you visit, you'll need to incorporate this into a Chrome or Firefox Extension (I've made custom Chrome extensions, super easy).

Answer 2

Found a way, with firefox.

1. Go to the desired website
2. Access the tool by going to Tools -> Developer -> Responsive Web Design
3. Enter the resolution you preferred, then refresh the current tab, the website will reload the site according to the screen resolution you've set