Impedire la visualizzazione portrait per alcune mediaqueries

Giacomo Boccherini

Nuovo Utente
17 Mar 2019
12
0
1
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:

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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.245
323
83
@Giacomo Boccherini
Il tag code si scrive con le parentisi quadre! In alternativa puoi usare:
box inserisci 2.png.JPG

Dalla barra degli strumenti