PhantomJS capturing screenshot of mobile browser

Question

I was trying to create a web screenshot with PhantomJS, but I am getting the image as mobile browser. I am using MAC OS Yosemite. Here is my JavaScript:

screen.js

var WebPage = require('webpage');
page = WebPage.create();
page.open('http://www.apple.com');
page.onLoadFinished = function() {
    window.setTimeout(function () {
        page.render('appleScreenShot' + '.png');
        phantom.exit();
    }, 2000);
}

And here is my command line code

phantomjs --ignore-ssl-errors=true --web-security=false --ssl-protocol=tlsv1 --debug=true screen.js

Answer 1

You may find that you need to specify a viewportSize (and perhaps even zoomFactor) for certain websites depending on the media queries specified within their resources.

From the documentation on viewportSize:

Because PhantomJS is headless (nothing is shown), viewportSize effectively simulates the size of the window like in a traditional browser.

Example usages:

page.viewportSize = {
    width: 1280,
    height: 800
};
page.zoomFactor = 1; //default value is 1

Answer 2

I suggest you to add the background color rendering, because the default will be a transparent background.

page.evaluate(function() {
    document.body.bgColor = 'white';
});