在 PhantomJS 中动态更改 viewportSize

Question

为了让 PhantomJS 在不同的视口宽度下创建页面的屏幕截图，我想对其进行动态调整。但是，这不起作用：

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

page.viewportSize = { width: 800, height: 600 };

page.open('http://example.com', function (status) {

    page.render('medium.png');

    page.viewportSize = { width: 630, height: 420 };

    page.render('small.png');

    phantom.exit();
});

当运行和 phantomjs script.js 时，这会生成两个相同的 PNG 文件 medium.png 和 small.png，每个文件的宽度为 800px。预期的行为是像这样 medium.png 和 small.png 宽度为 630px。如何实现？

PS：This answer to a similar question produces an error for me. Also the accepted answer 这个问题表明我想避免一个非常丑陋的解决方法。

Answer 1

我认为应该可以设置视口大小并再次打开页面，如下所示：

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

page.viewportSize = { width: 800, height: 600 };

page.open('http://example.com', function (status) {

    page.render('medium.png');


    page.viewportSize = { width: 630, height: 420 };

    page.open('http://example.com', function (status) {

        page.render('small.png');

        phantom.exit();
    });
});

在 PhantomJS 中动态更改 viewportSize

Dynamically change viewportSize in PhantomJS

viewport

phantomjs