截图PhantomJS中的移动网站

Question

我正在使用此脚本截取我想要成为移动网站的屏幕截图：

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生成的内容：

谷歌显然有一个移动网站，所以我哪里出错了？

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();
});

Answer 2

调试时，Google.com页面指定了min-width。因此，即使您在Phantom中调整页面大小，Google.com页面也会继续使用min-width呈现。

对于指定了min-width的其他网站也是如此。