Rotazione del sito in orizzontale se visualizzato su smartphone 
Autore: Luciano B.
Visite 223,
Followers 1,
Condiviso 0
Buona Serata, vorrei far si che il mio sito quando viene visualizzato su smartphone venga visualizzato in orizzontale obligando a girare lo smartphone, come posso fare? grazie
Postato il
... mi è venuta in mente questa mia vecchia invenzione in DE, forse potrebbe andarti bene adattandola al caso:
https://helpcenter.websitex5.com/it/post/254964
.
ciao
.
Autore
Ciao Kolasim, prendendo spunto dalla tua vecchia invenzione ho reperito sul web questo script che dovrebbe funzionare in questo modo: se il sito viene visualizzato su uno smartphone compare un messagio che suggerisce la rotazione in orizzontale dello smartphone, secondo te come posso spacchettarlo per inserirlo in website? Grazie
<!DOCTYPE html><htmllang="it"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Forzare Orizzontale</title><style>/* Nascondi tutto il contenuto per default */body { display: none; text-align: center; padding: 20px; } #message { display: none; font-size: 20px; color: red; } /* Stile per il messaggio su dispositivi mobili */@media (max-width: 768px) { body { display: block; } } </style></head><body><divid="message"><p>Per una migliore esperienza, ruota il dispositivo in modalità orizzontale.</p></div><divid="content"><!-- Il contenuto del tuo sito --><h1>Benvenuto nel mio sito!</h1><p>Questo è il contenuto principale del sito.</p></div><script>// Funzione che verifica l'orientamentofunctioncheckOrientation() { // Controlliamo se lo schermo è più largo che alto (modalità orizzontale)if (window.innerHeight > window.innerWidth) { // Modalità verticale: mostra il messaggiodocument.getElementById('message').style.display = 'block'; document.getElementById('content').style.display = 'none'; } else { // Modalità orizzontale: mostra il contenutodocument.getElementById('message').style.display = 'none'; document.getElementById('content').style.display = 'block'; } } // Aggiungi l'evento di cambiamento orientamento e ridimensionamento della finestrawindow.addEventListener('orientationchange', checkOrientation); window.addEventListener('resize', checkOrientation); window.onload = checkOrientation; </script></body></html>
... preferisco il mio con un banner temporizzato ...
...
... se vuoi provare il tuo codice, con un doppio controllo superfluo, l'ho regolarizzato, e quindi ti basta copiare ed incollare questo qui in un Oggetto Codice HTML per provarlo subito, poi da personalizzare per i tuoi scopi:
<style>
/** --- orientamento schermo di terze parti - regolarizzazione codice x WSx5 by KolAsim -- **/
/* Nascondi tutto il contenuto per default */
body { display: none; text-align: center; padding: 20px; }
#message { display: none; font-size: 20px; color: red; }
/* Stile per il messaggio su dispositivi mobili */
@media (max-width: 768px) { body { display: block; } }
</style>
<div id="message">
<p>Per una migliore esperienza, ruota il dispositivo in modalità orizzontale.</p>
</div>
<divid="content">
<!-- Il contenuto del tuo sito -->
<h1>Benvenuto nel mio sito!</h1>
<p>Questo è il contenuto principale del sito.</p>
</div>
<script>
// Funzione che verifica l'orientamento
function checkOrientation() { // Controlliamo se lo schermo è più largo che alto (modalità orizzontale)
if (window.innerHeight > window.innerWidth) { // Modalità verticale: mostra il messaggio
document.getElementById('message').style.display = 'block';
document.getElementById('content').style.display = 'none';
} else {
// Modalità orizzontale: mostra il contenuto
document.getElementById('message').style.display = 'none';
document.getElementById('content').style.display = 'block';
}
} // Aggiungi l'evento di cambiamento orientamento e ridimensionamento della finestra
window.addEventListener('orientationchange', checkOrientation);
window.addEventListener('resize', checkOrientation);
window.onload = checkOrientation;
</script>
.
ciao
.
Autore
Ciao KolAsim, avevi raggione il tuo banner risulta essere più funzionale alle mie esigenze, mi sono permesso di fare delle modifiche per adattarlo a quello che stavo cercando, inserendo i commenti se qualche altro dovesse averne bisogno, ho inserito il codice solo nelle proprietà delle pagine che volevo che comparisse. Ho cambiato il carattere inserendo dopo l'apertura del HEAD "<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">", poin prima della chiusura ho inserito
<style>
@media(max-width:600px) {
body::after {
content: "Per una migliore esperienza di navigazione, ruota il tuo smartphone in modalità orizzontale.";
white-space: pre-line; /* Assicura che venga rispettato il ritorno a capo */
position: fixed;
text-align: center;
top: 50%; /* Posizione centrale verticalmente */
left: 50%; /* Posizione centrale orizzontalmente */
transform: translate(-50%, -50%); /* Centra esattamente il testo */
width: auto; /* Rimuove la larghezza fissa per consentire al contenuto di adattarsi */
padding-top: 30px; /* Aumentato il padding superiore */
padding-bottom: 30px; /* Aumentato il padding inferiore */
font-size: 14px; /* Aumentato il font per renderlo più leggibile */
font-family: 'Montserrat', sans-serif; /* Applicato il font Montserrat */
background-color: #FF5733; /* Sfondo arancione brillante */
color: white; /* Testo bianco per il massimo contrasto */
border: 3px solid white; /* Bordo bianco */
border-radius: 15px; /* Bordo arrotondato e aumentato per effetto più morbido */
z-index: 9999; /* Porta il messaggio in primo piano sopra altri elementi */
opacity: 1;
-webkit-animation: fadeoutK 9s linear 1 forwards; /* Animazione con temporizzazione di 9 secondi */
animation: fadeoutK 9s linear 1 forwards; /* Animazione con temporizzazione di 9 secondi */
}
}
@-webkit-keyframes fadeoutK {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; } /* Fade out al 100% di trasparenza */
}
@keyframes fadeoutK {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; } /* Fade out al 100% di trasparenza */
}
</style>
Grazie Ancora KolAsim
... ad occhio e croce vedo che hai saputo modificare e personalizzare ad hoc...
...
.
ciao
.