javascript - 为浏览器设置视口(viewport)大小

Question

我正在玩我使用 selenium 开发的网络应用程序页面。

我使用 selenium JavaScriptExecutor 执行了以下脚本。

executor.executeScript("return window.innerWidth");
executor.executeScript("return window.innerHeight");

令我惊讶的是，所谓的视口(viewport)大小与 Chrome、IE 和 Firefox 不同。

Chrome :1366x667即:1366x667火狐:1366x657

然后我意识到，对于 body 和主 div，在 body 旁边，我将 css 样式的宽度和高度设置为 100%，这反过来会影响视口(viewport)大小。由于不同的浏览器有不同大小的工具栏和菜单，这个 100% 的值会在实际页面呈现时发生变化。

所以我使用 window.resizeTo(w,h) 来设置通用视口(viewport)大小。但我意识到它不适用于现代浏览器，除非窗口由相同的脚本打开。

所以我用了selenium的

driver.manage().window().setSize(new Dimension(w,h));

但我无法设置通用视口(viewport)大小。

请帮忙看看，是否可以使用selenium设置普通视口(viewport)大小？如果您需要更多信息，请告诉我。

我为所有浏览器执行了以下行:

driver.manage().window().getSize();

我得到的答案是 1382x744

所以我相信这是关于整个浏览器窗口的，而不仅仅是渲染区域。我很困惑，根据 innerWidth 的差异如何计算浏览器窗口的新大小？

PS: 我已经把所有的浏览器升级到最新版本(IE 是 11 版，因为我在 windows 7 上)，selenium 版本 我使用的是 2.46.x

Answer 1

“令我惊讶的是，所谓的视口(viewport)大小与 Chrome、IE 和 Firefox 不同。”

所有浏览器的视口(viewport)大小都不同，这不足为奇，Safari 甚至也有不同的大小。当您调用 window.innerHeight 时，它只计算浏览器的内部内容。因此，它之外的任何内容都不会被计算在内，例如，您输入 URL 的区域不会被计算在内。因此每个浏览器的标签和全局地址栏使用不同数量的最大高度。

当你使用 driver.manage().window().setSize(new Dimension(w,h));并将其设置为 1920x1080，例如所有浏览器都将设置为该大小，但当然它们将使用不同的内部高度。

如果您希望整个浏览器呈现为 1920x1080，那么我建议您使用

using Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_F11);
Thread.sleep(250);    
robot.keyRelease(KeyEvent.VK_F11);

但我建议不要这样做，因为更有效的测试是使用浏览器的正常内部高度，因为大多数用户不会按 F11 并全屏查看他们的内容。