PhantomJS captures a screenshot of a mobile browser

Question

I tried to create a web screenshot with PhantomJS, but I get the image as a 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 viewportSize (and possibly even zoomFactor ) for certain websites depending on the media queries specified in their resources.

From the documentation for viewportSize :

Since PhantomJS is headless (nothing is displayed), viewportSize effectively mimics the window size, as in a traditional browser.

Usage example:

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

Answer 2

I suggest you add a background color, since the default will be a transparent background.

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

Answer 3

In Java, I am modifying the User Agent string. This works for me.

 DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setJavascriptEnabled(true); String userAgent = "Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.41 Safari/535.1"; capabilities.setCapability(PhantomJSDriverService.PHANTOMJS_PAGE_SETTINGS_PREFIX + "userAgent", userAgent); driver = new PhantomJSDriver(capabilities);