Strange getting width of page in phantomjs

Question

here is the script code:

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

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

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

  var arr = page.evaluate(function () {
     var pageWidth = document.body.clientWidth;
     var pageHeight = document.body.clientHeight;

     return [pageWidth, pageHeight];
  });

  console.log('pagwWidth: ' + arr[0] + '; pageHeight: ' + arr[1]);

  page.render('google.pdf');
  phantom.exit();    
});

I'm trying to get clientWidth and clientHeight of document.body page. When I exec this script I'm getting the folowing values:

pagwWidth: 400; pageHeight: 484

Why is the width above is 400px? I think I should be wider.

---

Thank you for the reply. But then I don't understand the following thing. When I use viewportSize = {width: 1024, height: 800}

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

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

page.viewportSize = {width: 1024, height: 800};
page.open('http://www.google.com', function () {

  page.render('google.pdf');
  phantom.exit();    
});

I get the following file:

But if I use viewportSize = {width: 400, height: 400}

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

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

page.viewportSize = {width: 400, height: 400};
page.open('http://www.google.com', function () {

  page.render('google.pdf');
  phantom.exit();    
});

I get the same:

So I don't understand how does viewportSize affect to the view?

Answer 1

The document is affected by the viewport size and not by the paper size. Think along this line, how a web page looks like in your web browser has nothing to do with your current printer setting.

Use viewportSize if you want to influence the page layout:

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