@media only screen and (orientation: portrait) {
    #unity-canvas {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@media only screen and (orientation:landscape) and (max-device-width:1100px) {
    #unity-canvas {
        width: 100vh;
        height: 100vw;
        left: calc(50vw - 50vh);
        top: calc(50vh - 50vw);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}

@media only screen and (orientation:landscape) and (min-device-width:1100px) {
    #unity-canvas {
        height: 100vh;
        width: calc(9 / 16 * 100vh);
        left: calc(50vw - 9 / 16 * 50vh);
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}