Rotazione del sito in orizzontale se visualizzato su smartphone 
Auteur : Luciano B.
Visité 85,
Followers 1,
Partagé 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
Posté le
... mi è venuta in mente questa mia vecchia invenzione in DE, forse potrebbe andarti bene adattandola al caso:
https://helpcenter.websitex5.com/fr/post/254964
.
ciao
.
Auteur
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
.