javascript - 更改浏览器的窗口大小以进行测试

Question

为了测试网站在不同屏幕分辨率下的(响应式)外观，我想以编程方式启动具有特定窗口大小的浏览器来模拟这些屏幕大小。

最好的办法是在浏览器已经运行时更改窗口大小，尽管我读到 window.resizeTo() 函数不再适用于现代浏览器。 我在浏览器扩展的上下文中，所以我也可以使用它的功能。但是，我在这里找不到适合我需要的东西:https://developer.mozilla.org/en-US/Add-ons/SDK .

一个不太令人满意的解决方案是以固定确定的屏幕尺寸启动浏览器(虽然我不知道它是如何工作的，因为至少 Firefox 没有这样的启动参数 - https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options#-new-window_URL)。

我想一定有一种方法可以控制窗口的大小。我还尝试使用样式宽度和高度属性将给定网站的主体包裹起来，但与使用该窗口大小访问网站相比，该网站的行为完全不同。

我在 Unix 系统 (Mac OS X Yosemite) 上。

编辑

我最终解决问题如下:

var tabs = require("sdk/tabs");
function showPage(tab) {
    var {
        viewFor
    } = require("sdk/view/core");
    var win = viewFor(require("sdk/windows").browserWindows[0]);
    win.resizeTo(dimension.width, dimension.height);
    tab.on("pageshow", attachScript);
    tabs.removeListener('open', showPage);
}
tabs.on('open', showPage);

Answer 1

有几种可能的解决方案:

1. 打开 about:config并确保dom.disable_window_move_resize设置为 false .现在您可以调整弹出窗口的大小:

   var myWindow = window.open("about:blank", "SomeName", "width=300,height=300");
   myWindow.resizeTo(200, 400);
   

2. 使用<iframe>并调整它的大小。

3. 可能是最好的方法:使用 window.resizeTo(400, 500)在附加组件中。当我尝试在属于网页的普通“Web 控制台”中运行此行时，它不起作用。但它在使用属于整个浏览器 chrome 的“浏览器工具箱”时有效。我认为附加组件也可以拥有这些特权。

   更新:我创建了一个工作示例:

   var buttons        = require('sdk/ui/button/action');
       browserWindows = require("sdk/windows").browserWindows;
       viewFor        = require("sdk/view/core");
   
   buttons.ActionButton({
       id: "resize-window",
       label: "Resize Window",
       icon: {
           "16": "./icon-16.png",
           "32": "./icon-32.png",
           "64": "./icon-64.png"
       },
       onClick: handleClick
   });
   
   function handleClick(state) {
       var win = viewFor(browserWindows[0]);
       win.resizeTo(500, 500);
   }
   

4. 有一个“响应式设计 View ”和“开发者工具栏”中使用的命令 (resize to 480 800)，但我不知道如何从外部触发它们:-/。

5. “Web Developer”等插件可以调整窗口大小。你可以看看他们的解决方案:https://github.com/chrispederick/web-developer/

6. 添加命令行参数 -width和 -height在启动 Firefox 或打开新窗口时。

可能并非所有解决方案都适合您的测试环境，但希望至少有一个解决方案适合 ;)。