2016-12-27 162 views
-1

我想调整我的浏览器窗口使用Javascript来测试我的响应式网页设计功能。 但我没有找到相同的选项。是否可以使用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 
} 

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

+2

这可以帮助你http://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window – Alexis

+0

我已经提到使用resizeTo()方法。这在我的情况下是没有用的。 :( – Madhusudan

回答

0

您可能会使用resizeBy/resizeTo但您为什么不想使用Chrome内置测试仪? 可以打开开发者控制台cmd/ctrl + alt + I并点击Device Toolbarcmd/ctrl + shift + M并使用预定义模板调节屏幕尺寸还是有多种方法可以调整它创建自己的

更新

对于自动化测试。哪个运行时正在运行你的Jasmine测试?对于PhantomJS可以使用

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

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

更多信息here

+0

我们正在使用Jasmine框架进行测试功能,因为我必须对代码窗口大小进行更改 – Madhusudan

0

调整窗口的大小,你可以简单地这样做:

window.resizeTo(width, height); 
+0

copy pase http://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window –

-1

有2个选项来实现响应式布局结构:

  1. 使用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的机会有限 - :)

+0

作者想要使用js调整**浏览器窗口**,而不是使其布局响应 –

相关问题