Is it possible to resize browser window size using javascript?

Question

I want to resize my browser window using Javascript to test my responsive webpage design functionality. But I didn't find any option for the same.

What I found is, we can modify window size for newly pop up window as shown below:

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

I have defined some responsive behaviour using following css code:

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

Can we resize browser window where our page is launched? Or it is not possible?

this can help you http://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window — Alexis, Dec 27 '16 at 09:00
I have already mentioned use of resizeTo() method. which is not useful in my case. :( — Madhusudan, Dec 27 '16 at 09:05

Nikolay Osaulenko · Answer 1 · 2016-12-27T09:11:30.153

0

You likely can use resizeBy/resizeTo but why don't you want to use Chrome built-in tester? You can open developer console cmd/ctrl + alt + I and click on Device Toolbar or cmd/ctrl + shift + M and adjust screen size using predefined templates or create your own

Update

For automation test there are a several ways to adjust it. Which runtime is running your Jasmine tests? For PhantomJS you can use

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

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

More info here

edited Dec 27 '16 at 09:11

answered Dec 27 '16 at 09:06

Nikolay Osaulenko

1,462
1
12
21

We are using Jasmine framework for testing functionality. In that I have to code window size changes. – Madhusudan Dec 27 '16 at 09:07

score 0 · Answer 2 · answered Dec 27 '16 at 09:08

0

To resize the window, you can simply do this:

window.resizeTo(width, height);

answered Dec 27 '16 at 09:08

Anand Systematix

632
5
15

copy pase http://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window – Genish Parvadia Dec 27 '16 at 09:10

score -1 · Answer 3 · answered Dec 27 '16 at 09:16

There are 2 options to implement responsive layout structure :

by using 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()

By using css3 media query :

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

Professionally Media query would be better option but can we use javascript where limited access of css file or inline css -:)

Author wants to resize **browser window** using js and not make his layout responsive — Nikolay Osaulenko, Dec 27 '16 at 09:31

Is it possible to resize browser window size using javascript?

3 Answers3