出于测试目的更改 window 浏览器大小

Question

为了测试网站在不同屏幕分辨率下的（响应）外观，我想以编程方式启动具有特定 window 尺寸的浏览器来模拟这些屏幕尺寸。

最好的办法是在浏览器已经是运行时更改 window 大小，尽管我读到 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） .

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

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

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

Answer 2

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

See This

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

Answer 3

有几种可能的解决方案：

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

可能是最好的方法：在附加组件中使用 window.resizeTo(400, 500)。当我尝试在属于网页的正常 "Web Console" 中运行这一行时，它不起作用。但它在使用属于整个浏览器 chrome 的 "Browser Toolbox" 时有效。我认为附加组件也可以拥有这些特权。

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

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);
}

有一个 "Responsive Design View" 以及 "Developer Toolbar" (resize to 480 800) 中使用的命令，但我不知道如何从外部触发它们:-/.
像 "Web Developer" 这样的插件可以调整 window 的大小。你可以看看他们的解决方案：https://github.com/chrispederick/web-developer/
在启动 Firefox 或打开新的 window.

-width

-height

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

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', ... 'integer', 'integer'])，你需要将这些点映射到你的 Firefox window。换句话说，您正在自动执行以特定屏幕尺寸打开 window 的任务，使用工具 --> 响应式 Web 开发人员 -> 可以输入 window 尺寸的下拉框等. 有多种工具可以获取鼠标的坐标。这是我前一段时间写的，所以我不记得我用了什么。 Google是你的朋友。
每次您想要以特定 window 大小打开 Firefox 时，您都可以运行该脚本。此外，您可以创建一个 .desktop 快捷方式来使用此脚本启动 Firefox。稍微修改此代码以允许命令行参数指定其他屏幕尺寸，或者简单地为每个屏幕尺寸创建多个脚本。

出于测试目的更改 window 浏览器大小

Change window size of browser for test purpose

html

javascript

css

firefox

window