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:
Discussioni simili
Autore Titolo Forum Risposte Data
elpirata Impedire inserimento data di oggi e date passate jQuery 39
T [PHP] impedire un doppio INSERT INTO dopo reload della pagina PHP 3
M [PHP] Impedire di digitare determinati caratteri nell’input (controllo in tempo reale) PHP 4
V [HTML] impedire il ridimensionamento delle immagini zoom browser HTML e CSS 11
S come impedire download diretto dei file ma non da pagina web PHP 0
Shyson Impedire che il popup sparisca Javascript 0
N impedire invio dati form jQuery 3
xone Impedire di visualizzare pagine php incluse PHP 5
radioButton Impedire nuovo login se si è già loggati PHP 3
F impedire accesso phpmyadmin PHP 0
F impedire scroll verticale Javascript 0
F impedire scroll verticale jquery Javascript 0
G impedire accesso a cartella o file Apache 1
A Impedire download files da siti web CMS (Content Management System) 10
R Impedire l'accesso a una pagina dalla barra degli indirizzi PHP 27
N impedire accesso area riservata a utenti registrati Database 3
B [PHP] impedire download video PHP 12
G Impedire salvataggio pagina web HTML e CSS 5
I impedire ridimensionamento del browser HTML e CSS 1
Matt89 Impedire lo spam! PHP 2
M impedire al browser di mettere pagine in cache PHP 1
F come impedire la riproduzione ad ogni cambio pagina? Flash 4
P Impedire l'accesso ad un determinato Host HTML e CSS 2
M Impedire modifiche nelle maschere MS Access 0
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
M Errore visualizzazione meta tag title e description SEO e Posizionamento 1
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
F Visualizzazione motore di ricerca SEO e Posizionamento 2
T cms con visualizzazione mind map CMS (Content Management System) 0
B margini e padding nella visualizzazione mobile HTML e CSS 6
A Errore visualizzazione selezione testo Photoshop 0
R Visualizzazione barra superiore Google Search Console 0
Beppe2 Visualizzazione sottotitoli video HTML e CSS 2
F Problemi di visualizzazione di un sito su più browser WordPress 0
S Problemi di visualizzazione form contatti sito web HTML e CSS 2
L risolto visualizzazione e ordinamento dati PHP 1
Y Problema visualizzazione PDF generato da fpdf PHP 1
gandalf1959 Youtube e possibilità di visualizzazione delle playlist HTML e CSS 0
L Mancata visualizzazione di icone su button PHP 0
F [PHP] Visualizzazione video PHP 3
R Visualizzazione tabella Mysql MySQL 0
R anomalia nella visualizzazione tabella mysql MySQL 1
R [PHP] Visualizzazione dati Array PHP 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
gandalf1959 Estrazione e visualizzazione del simbolo dell'euro php/mysqli PHP 0
M Problema visualizzazione colori in photoshop Photoshop 0
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
R Visualizzazione elementi Access MS Access 2
D [Photoshop] Visualizzazione a Monitor tasti ALT e CTRL Photoshop 0
Andrea_Ventura [HTML] Problemi con visualizzazione Navigation Bar HTML e CSS 10

Discussioni simili