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

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

最好的办法是在浏览器已经运行时更改窗口大小，尽管我读到window.resizeTo（）函数在现代浏览器中不再起作用。 我处于浏览器扩展的环境中，因此我也可以使用它的功能。然而，我在这里找不到任何适合我需要的东西：

一个不太令人满意的解决方案是以固定的屏幕大小启动浏览器（尽管我不知道这是如何工作的，因为至少Firefox没有这样的启动参数）

我想一定有办法控制窗户的大小。我还试图用样式宽度和高度属性来包装一个给定网站的主体，但与使用该窗口大小访问该网站相比，该网站的行为完全不同

我使用的是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);

---

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

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

chrome.windows.update（…）

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

有几种可能的解决方案：

打开

about:config

并确保

dom.disable\u window\u move\u resize

设置为

false

。现在您可以调整弹出窗口的大小：

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

使用

并调整其大小

可能是最好的方法：在加载项中使用

window.resizeTo（400500）

。当我试图在属于网页的普通“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);
}

“开发者工具栏”中有一个“响应式设计视图”和可使用的命令（

resize to 480 800

），但我不知道如何从外部触发它们：-/

像“WebDeveloper”这样的附加组件可以调整窗口大小。您可以查看他们的解决方案：

在启动Firefox或打开新窗口时添加命令行参数

-width

和

-height

---

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

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

安装xdotool:~$sudo apt安装xdotool

安装python-gtk2和python-wnck:~$sudo apt安装python-gtk2和python-wnck

将以下脚本放置在您希望存储脚本的任何位置：

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()

在代码中的任何地方（['xdool'，…'integer'，'integer']），都需要将这些点映射到Firefox窗口上的点。换句话说，您正在使用工具-->响应Web Developer->可输入窗口大小的下拉框等，自动打开具有特定屏幕大小的窗口。有各种工具可以获取鼠标坐标。这是我不久前写的，所以我不记得我用了什么。谷歌是你的朋友

然后，您可以在每次打开具有特定窗口大小的Firefox时运行该脚本。此外，您还可以创建.desktop快捷方式来使用此脚本启动Firefox。稍微修改一下这段代码，允许命令行参数指定其他屏幕大小，或者简单地为每个屏幕大小创建多个脚本，都很容易

---

您可以打开一个新窗口并指定其大小。您是否尝试过加载项？打开一个新窗口实际上是可能的。我会试试看。谢谢。应该注意的是，该解决方案仅在Chrome中可用，而不是Firefox（根据标签和原始问题）。如果在Chrome中进行测试是一种选择，那么这绝对是一个很好的解决方案！正如我所说的，我想通过编程来实现这一点。如果这可以通过API或其他扩展触发就好了。如果有人需要手动点击某个东西，这是没有帮助的。我在Chrome中没有问题，因为我可以使用一个webview，我可以指定它的维度。Firefox更像是一个问题：-/Hmm，我不知道这个问题是针对Mac的。这在Ubuntu上有效，但我不确定Mac是否有效。