javascript - 在 PhantomJS 中截屏移动网站

Question

我正在使用此脚本以 iPhone 的尺寸截取我想要的移动网站的屏幕截图:

var system = require('system');
var args = system.args;

var page = require('webpage').create();

page.open(args[1], function () {

    page.viewportSize = { width: 414, height: 736 };

    page.clipRect = { top: 0, left: 0, width: 414, height: 736 };
    page.render(args[2]);
    console.log(args[2]);
    phantom.exit();
});

在某些网站上，这似乎有效，但在其他网站上，它错误地显示了它的实际外观。

例如，以下是它为 Google 生成的内容:

Google 显然有一个移动网站，那么我哪里出错了？

Answer 1

它与 UserAgent 有关

有关如何设置的信息:http://phantomjs.org/api/webpage/property/settings.html

这段代码对我有用:

var system = require('system');
var args = system.args;

var page = require('webpage').create();

page.settings.userAgent = 'Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30';

page.open("http://www.google.com", function () {

    page.viewportSize = { width: 414, height: 736 };

    page.clipRect = { top: 0, left: 0, width: 414, height: 736 };
    page.render("./test.jpg");

    phantom.exit();
});