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

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）。

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

我使用的是 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. 有一个“响应式设计视图”以及“开发者工具栏”(resize to 480 800) 中使用的命令，但我不知道如何从外部触发它们：-/。

5. 诸如“Web Developer”之类的附加组件能够调整窗口大小。你可以看看他们的解决方案：https://github.com/chrispederick/web-developer/

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

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

Answer 2

这个答案不是很可靠，因为每次将新项目添加到工具菜单时，您都必须编辑脚本。它对普通用户也没有帮助，因为它需要您编辑一些 Python 代码。话虽如此，它可以工作，并且对于不想安装附加组件的人可能很有用。

1. 安装 xdotool：~$ sudo apt install xdotool
2. 安装 python-gtk2 和 python-wnck：~$ sudo apt install python-gtk2 python-wnck

3. 将以下脚本放置在您想要存储脚本的任何位置：

   import gtk
   from random import randint
   import subprocess
   import time
   import wnck
   
   def main():
   
   firefox = subprocess.Popen(['firefox'])
   
   # start with a maximized screen. If this is undesired,
   # use code on lines 45 - end, disregaurding the rest 
   sentinal = True
   while sentinal:
   
       screen = wnck.screen_get_default()
   
       while gtk.events_pending():
   
           gtk.main_iteration()
   
       windows = screen.get_windows()
   
       for w in windows:
   
           if w.get_pid() == firefox.pid:
   
               w.maximize()
               sentinal = False
   
       time.sleep(1)
   
   
   # click the 'Tools' menu in Firefox
   subprocess.call(['xdotool', 'mousemove', '--sync', '300', '80'])
   subprocess.call(['xdotool', 'click', '1'])
   time.sleep(1)
   
   # hover over 'Web Developer' sub-menu
   # (i.e. Tools -> Web Developer)
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '0', '180'])
   subprocess.call(['xdotool', 'click', '1'])
   
   # click the responsive design view sub-menu
   # (i.e. Tools -> Web Developer -> Responsive Design View)
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '300', '0'])
   time.sleep(1)
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '0', '300'])
   time.sleep(1)
   subprocess.call(['xdotool', 'click', '1'])
   
   # set your window size here
   y = ['1280x600']
   
   choice = y[0]
   
   # click the uri bar
   subprocess.call(['xdotool', 'mousemove', '--sync', '110', '144'])
   time.sleep(1)
   subprocess.call(['xdotool', 'click', '1'])
   
   # tab to the drop-down resolution menu
   for i in range(0, 3):
   
       subprocess.call(['xdotool', 'key', 'Tab'])
   
   # erase whatever is in the resolution menue by default
   for j in range(0, 15):
   
       subprocess.call(['xdotool', 'key', 'BackSpace'])
   
   # enter a random (standardized) screen resolution
   subprocess.call(['xdotool', 'type',  choice])
   subprocess.call(['xdotool', 'key', 'Return'])
   
   if __name__ == '__main__':
       main()
   

4. 在您看到的代码中的任何位置（['xdotool', ... 'integer', 'integer']），您需要将这些点映射到 Firefox 窗口上的点。换句话说，您正在自动执行打开具有特定屏幕尺寸的窗口的任务，使用工具 --> 响应式 Web 开发人员 -> 可以在其中输入窗口大小的下拉框等。有各种工具可以获取鼠标坐标。前段时间写的，所以不记得用了什么。 Google 是您的朋友。

5. 您可以在每次想要以特定窗口大小打开 Firefox 时运行该脚本。此外，您可以创建一个 .desktop 快捷方式来使用此脚本启动 Firefox。稍微修改此代码以允许命令行参数指定其他屏幕尺寸或简单地为每个屏幕尺寸创建多个脚本会很容易。

Answer 3

你试过这个图标吗？你可以选择任何你想要的设备，或者只是控制视口的宽度和高度。

Answer 4

我发现唯一接近调整 chrome 窗口大小的方法是使用可以调整窗口大小的 chrome 扩展。实际的扩展命令是 chrome.windows.update(...)

See This

但我不确定这就是你要找的。 如果您仍然感兴趣，至少有 2 个扩展可以做到这一点，我已经看到尝试 this.