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