Salve sto creando un sito, e vorrei che per le mediaqueries mobile e tablet in portrait comparisse una maschera con scritto "gira il dispositivo" in sostanza voglio che quando il sito viene guardato su mobile o tablet si possa vedere solo in landscape. ho inserito questo script:
poi nel css delle mediaqueries che mi interessano:
lo script funziona ma per tutte le larghezze, quindi anche per il desktop. qualcuno può aiutarmi su come risolvere il problema??
chiedo scusa se è una ripetizione ma non ho trovato nulla in giro, e chiedo scusa se ho sbagliato qualcosa nell'esposizione.
Codice:
<body onorientationchange="detect_orientation();" onload="detect_orientation();" style="overflow:hidden;">
<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>poi nel css delle mediaqueries che mi interessano:
Codice:
#turn-device {
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);
}lo script funziona ma per tutte le larghezze, quindi anche per il desktop. qualcuno può aiutarmi su come risolvere il problema??
chiedo scusa se è una ripetizione ma non ho trovato nulla in giro, e chiedo scusa se ho sbagliato qualcosa nell'esposizione.
Ultima modifica di un moderatore:
