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

我猜必须有办法控制窗口的大小。我还尝试使用样式宽度和高度属性包围给定网站的主体，但与使用该窗口大小访问时，网站的行为完全不同。

我在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

有几个可能的解决方案：

打开about:config并确保dom.disable_window_move_resize设置为false。现在您可以调整弹出窗口的大小：
```
var myWindow = window.open("about:blank", "SomeName", "width=300,height=300");
myWindow.resizeTo(200, 400);
```
使用<iframe>并调整其大小。

可能是最好的方法：在附加组件中使用window.resizeTo(400, 500)。当我尝试在正常的Web控制台中运行此行时＃34;这属于一个它不起作用的网页。但是在使用＆＃34;浏览器工具箱＆＃34;属于整个浏览器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);
}

有一个＆＃34;响应式设计视图＆＃34;以及在开发人员工具栏中使用的命令＆＃34; （resize to 480 800）但我不知道如何从外面触发它们： - /。
附加组件，例如＆＃34; Web Developer＆＃34;能够调整窗口大小。您可以查看他们的解决方案：https://github.com/chrispederick/web-developer/
在启动Firefox或打开新窗口时添加命令行参数-width和-height。

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

Answer 2

enter image description here

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

Answer 3

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

See This

但我不确定这是你在找什么。如果它仍然感兴趣，至少有2个扩展程序可以执行此操作，我已经看过尝试this.

Answer 4

这个答案不是很强大，因为每次将新项目添加到“工具”菜单时都必须编辑脚本。它对普通用户也没有帮助，因为它需要你编辑一些Python代码。话虽这么说，它可以工作，对于那些不想安装插件的人来说可能会有用。

安装xdotool：〜$ sudo apt install xdotool
安装python-gtk2和python-wnck：〜$ sudo apt install 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()

您看到的代码中的任何位置（['xdotool'，...'整数'，'整数']），您需要将这些点映射到Firefox窗口上的点。换句话说，您正在使用工具 - ＆gt;自动执行打开具有特定屏幕尺寸的窗口的任务。响应式Web开发人员 - ＆gt;您可以输入窗口大小的下拉框等。有各种工具可以获取鼠标的坐标。我写了一会儿，所以我不记得我用过什么。谷歌是你的朋友。
然后，您可以在每次要打开具有特定窗口大小的Firefox时运行该脚本。此外，您可以创建一个.desktop快捷方式来使用此脚本启动Firefox。可以很容易地修改此代码以允许命令行参数指定其他屏幕大小，或者只是为每个屏幕大小创建多个脚本。

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

4 个答案: