Question

我想使用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>

我使用以下css代码定义了一些响应行为：

@media screen and (max-width: 500px){
     //style changes
}

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

Answer 1

您可以使用resizeBy/resizeTo，但为什么不想使用Chrome内置测试仪？您可以打开开发者控制台cmd/ctrl + alt + I并点击Device Toolbar或cmd/ctrl + shift + M并使用预定义模板调整屏幕大小或创建自己的

<强>更新

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

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

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

更多信息here

Answer 2

要调整窗口大小，您只需执行以下操作：

window.resizeTo(width, height);

Answer 3

有两种方法可以实现响应式布局结构：

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

使用css3媒体查询：

@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}

专业媒体查询会是更好的选择，但我们可以使用javascript限制访问css文件或内联css - ：）

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

3 个答案: