是否可以使用javascript调整浏览器窗口大小？_Javascript_Html_Css

是否可以使用javascript调整浏览器窗口大小？

javascript html css

是否可以使用javascript调整浏览器窗口大小？,javascript,html,css,Javascript,Html,Css,我想使用Javascript调整浏览器窗口的大小，以测试响应性网页设计功能。但我没有找到任何相同的选择我发现，我们可以修改新弹出窗口的窗口大小，如下所示： <body> <p>Open a new window, and resize the width and height to 500px:</p> <button onclick="openWin()">Create window</button> <button o

我想使用Javascript调整浏览器窗口的大小，以测试响应性网页设计功能。但我没有找到任何相同的选择

我发现，我们可以修改新弹出窗口的窗口大小，如下所示：

<body>

<p>Open a new window, and resize the width and height to 500px:</p>

<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>

<script>
var myWindow;

function openWin() {
    myWindow = window.open("", "", "width=100, height=100");
 }

function resizeWin() {
    myWindow.resizeTo(250, 250);
    myWindow.focus();
}
</script>

</body>

我们可以调整页面启动的浏览器窗口大小吗？或者这是不可能的？

您可能可以使用

resizeBy/resizeTo

但是为什么不想使用Chrome内置测试仪呢？您可以打开开发者控制台

cmd/ctrl+alt+I

并单击

设备工具栏

或

cmd/ctrl+shift+M

并使用预定义模板调整屏幕大小或创建自己的模板

更新

对于自动化测试，有几种方法可以调整它。哪个运行时正在运行您的Jasmine测试？对于PhantomJ，您可以使用

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
  width: 480,
  height: 800
};

更多信息要调整窗口大小，只需执行以下操作：

window.resizeTo(width, height);

有两个选项可以实现响应式布局结构：

通过使用javascript

    function  ResponsiveLayout() {

        if (screen.width <= 1440) {

            $('#content').addClass("pipeline1");

        }
        else if (screen.width > 1440 && screen.width <= 1600) {
            $('#content').addClass("pipeline2");
        }
        else if (screen.width > 1600) {
            $('#content').addClass("pipeline3");
        }
    };ResponsiveLayout()

专业的媒体查询将是更好的选择，但我们是否可以在css文件访问受限的情况下使用javascript或内联css-：）

这可以帮助您我已经提到使用resizeTo（）方法。这对我来说没什么用（我们使用Jasmine框架测试功能。因为我必须对窗口大小的更改进行编码。copy pase作者希望使用js调整浏览器窗口的大小，而不是使其布局具有响应性

    function  ResponsiveLayout() {

        if (screen.width <= 1440) {

            $('#content').addClass("pipeline1");

        }
        else if (screen.width > 1440 && screen.width <= 1600) {
            $('#content').addClass("pipeline2");
        }
        else if (screen.width > 1600) {
            $('#content').addClass("pipeline3");
        }
    };ResponsiveLayout()

@media (min-width: 1200px){css attrabutes}
@media (max-width: 1199px) and (min-width: 981px){css attrabutes}
@media (max-width: 980px) and (min-width: 641px){css attrabutes}
@media (max-width: 640px) and (min-width: 481px){css attrabutes}
@media (max-width: 480px) and (min-width: 321px){css attrabutes}
@media (max-width: 320px){css attrabutes}