Salve
Ho bisogno davvero del vostro aiuto.
Vorrei che il sito che sto creando si visualizzasse solo in landscape per le mediaqueries mobile e tablet e per questa ragione ho inserito questa stringa di codice:

codice HTML:
<body onorientationchange="detect_orientation();" onload="detect_orientation();" style="overflow:hidden;">


codice HTML:
<div id="turn-device">	<p class="turn">		<i class="turn-icon"></i>Per favore, gira il dispositivo.	</p></div>
<script> function detect_orientation() {
	if (window.innerHeight > window.innerWidth) {
		$("#turn-device").hide();		$(".turn-icon").removeClass("rotate");
	} else {
		setTimeout(turn_device, 1000);		$("#turn-device").show();
	}
}
function turn_device() {
	$(".turn-icon").addClass("rotate");
}</script>


codice:
#turn-device {
codice:
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: none;
 z-index: 9999;
 background-color: #333;
}

#turn-device .turn {
 margin-top: 50px;
 text-align: center;
 color: #fff;
}

#turn-device .turn-icon {
 transition: All 0.5s ease;
 -webkit-transition: All 0.5s ease;
 -moz-transition: All 0.5s ease;
 -o-transition: All 0.5s ease;
 transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 display: block;
 width: 100%;
 height: 64px;
 margin-bottom: 10px;
 background: url(turn-mob-device.png) center no-repeat;
}

#turn-device .turn-icon.rotate {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
}


il problema è che con questo codice la maschera con scritto gira il dispositivo mi compare su tutte le larghezze anche desktop. aiutatemi dove è il problema. Grazie mille