2016-12-27 129 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調整**瀏覽器窗口**,而不是使其佈局響應 –

相關問題