Impedire la visualizzazione portrait per alcune mediaqueries

Discussione in 'jQuery' iniziata da Giacomo Boccherini, 10 Luglio 2019.

  1. Giacomo Boccherini

    Giacomo Boccherini Nuovo Utente

    Registrato:
    17 Marzo 2019
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 10 Luglio 2019
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.741
    Mi Piace Ricevuti:
    279
    Punteggio:
    83
    Sesso:
    Maschio
    @Giacomo Boccherini
    Il tag code si scrive con le parentisi quadre! In alternativa puoi usare:
    box inserisci 2.png.JPG
    Dalla barra degli strumenti
     
  3. Giacomo Boccherini

    Giacomo Boccherini Nuovo Utente

    Registrato:
    17 Marzo 2019
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Qualcuno sa come posso risolvere questo problema? Ve ne sarei grati.
     
Sto caricando...

Condividi questa Pagina