html {
	height: 100%;
}
body {
    margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */
    background: #000;
	height: 100%;
}
div {
	height: 100%;
}
<!--
#orientation {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/orientation.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(0, 0, 0);
    z-index: 999;
    display: none;
}
-->
#orientation {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color:black;
	background-image:url('../assets/orientation2.png');
	background-repeat:no-repeat;
	background-position: top;
	display:none;
	}


canvas, img {
 	width: 100%;
 	height: 100%;

 	image-rendering:optimizeSpeed;            /* Legal fallback */
	image-rendering:-moz-crisp-edges;          /* Firefox        */
	image-rendering:-o-crisp-edges;            /* Opera          */
	image-rendering:-webkit-optimize-contrast; /* Safari        */
	image-rendering:optimize-contrast;        /* CSS3 Proposed  */
	image-rendering:crisp-edges;              /* CSS4 Proposed  */
	image-rendering:pixelated;                /* CSS4 Proposed  */
	/*-ms-interpolation-mode:nearest-neighbor;  /* IE8+          */
	-ms-interpolation-mode: nearest-neighbor;
	/*-ms-interpolation-mode: bicubic;
}