How to Make the Window Full Screen With JavaScript (Stretching All Over the Screen)

How to make the window full screen with Javascript (stretching all over the screen)

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

Switch window between normal and full-screen mode

There's now a proper fullscreen API (first proposed by Mozilla and later released as a W3C proposal) has been implemented by Webkit (Safari 5.1+/Chrome 15+) and Firefox (10+). A brief history and usage examples here. Note that IE10 will allegedly not support the API.

Permanent Full Screen in Browser

function checkWH(){
    if((window.outerWidth-screen.width) ==0 && (window.outerHeight-screen.height) ==0 )
    {
        alert('fullscreen');
    }
}

$(window).keypress(function(event){
    var code = event.keyCode || event.which;
    if(code == 122){
        setTimeout(function(){checkWH();},1000);
    }
});

I think you can use something like this.

Put browser full screen and refresh on button click (simulate F11) JavaScript

maybe this can help you example of full screen using the blog post Native Fullscreen JavaScript API (plus jQuery plugin)

Javascript: Automatically maximize browser window and switch to full screen mode?

To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this

stage.displayState = StageDisplayState.FULL_SCREEN;

Why is window.innerWidth smaller than screen.width even in full screen?

As window.innerWidth and window.innerHeight return the dimensions of the viewport window instead of the display monitor, zooming into a webpage will decrease the values of both window.innerWidth and window.innerHeight.

Zooming in can happen both in the operating system and in the browser. If the viewport window covers the entire screen and window.innerWidth and screen.width do not match, it's most likely the OS that is zoomed in.

To fix this, just set the OS's zoom to 100%. This can be done in Windows by going to display settings and setting scale to 100%.

---

Related Topics