Bloccare l’orientamento di una pagina web su smartphone: come forzare la modalità portrait o landscape

Nell’era mobile-first, l’esperienza utente sui dispositivi mobili è un aspetto cruciale nello sviluppo di applicazioni web. In alcuni casi specifici — come app interattive, giochi, o interfacce ottimizzate per l’uso verticale — può essere utile o addirittura necessario bloccare la visualizzazione in modalità verticale (portrait) o orizzontale (landscape) per garantire una migliore fruibilità e coerenza dell’interfaccia.

In questo articolo vedremo come rilevare l’orientamento del dispositivo e forzare la visualizzazione in verticale o in orizzontale nei browser mobili, utilizzando solo HTML, CSS e JavaScript, senza ricorrere ad app native o implementare chissà quali permessi speciali.

Costruzione dei layout in funzione dell’orientamento del device

Molti sviluppatori si scontrano con la necessità di controllare l’orientamento dello schermo per assicurare che il contenuto venga fruito nel modo corretto. La tecnica del design responsivo, sebbene efficace nella maggior parte dei casi, non è sempre sufficiente, soprattutto in quei progetti dove l’orientamento è parte integrante della logica dell’applicazione.

Ad esempio, se stiamo sviluppando un gioco ottimizzato per il layout verticale oppure un’applicazione destinata ad ambienti kiosk o totem interattivi, l’utilizzo della visualizzazione in orizzontale (landscape) potrebbe compromettere la fruizione del contenuto. In questi contesti, la risoluzione orizzontale non è solo indesiderata, ma talvolta non compatibile con la struttura e le funzionalità previste. In situazioni del genere, può risultare estremamente utile avere un modo per “forzare” l’utente a utilizzare il dispositivo in modalità portrait, al fine di garantire un’esperienza coerente e stabile.

Tuttavia, va chiarito che la maggior parte dei browser mobile non permette di bloccare fisicamente la rotazione dello schermo, per motivi legati a usabilità e accessibilità. Ciò nonostante, è possibile intervenire a livello di interfaccia, mostrando un overlay o un messaggio visivo che oscuri temporaneamente il contenuto e inviti l’utente a ruotare il dispositivo nel verso corretto.

Perché bloccare la rotazione del Device

Bloccare o disincentivare la modalità landscape o portrait può essere necessario per:

• Preservare l’integrità del layout: alcune interfacce sono progettate solo per portrait o landscape.
• Migliorare l’usabilità: interazioni touch, scroll e flussi d’uso possono essere ottimizzati solo in verticale o orizzontale (non entrambi).
• Evitare bug visivi: layout complessi possono rompersi se non vengono riprodotti su una determinato tipo di risoluzione.
• Guidare l’utente: in alcune UX è essenziale mantenere la coerenza dell’esperienza visiva.

Bloccare la visualizzazione Landscape

Vediamo come implementare un blocco per il nostro sito o web-app che impedisca all’utente di visualizzarlo, da mobile, in orientamento panoramico (landscape). In altre parole vogliamo forzare l’utente a visualizzare il contenuto solo in modalità verticale.

Ovviamente, inutile dirlo, la stessa tecnica può essere utilizzata per gestire l’esigenza contraria, cioè vincolare l’utente ad una visualizzazione in orizzontale e bloccare quella verticale.

La strategia consiste nel mostrare un overlay sopra il contenuto principale ogni volta che il dispositivo viene ruotato nella modalità non voluta dallo sviluppatore. Questo overlay, che copre tutto il contenuto della pagina web originale, invita l’utente a ruotare nuovamente il dispositivo in verticale per poter visualizzare la pagina.

Struttura HTML e CSS dell’overlay di avviso di blocco rotazione

Questo codice HTML va inserito all’interno del body della nostra pagina web:

<!-- Orientation Lock -->
<div id="orientation-lock" style="display: none;">
  <div class="orientation-warning">
    <img src="/assets/img/rotate.png" alt="Rotate device" class="rotate-icon">
    <p>Ruota il dispositivo per continuare</p>
  </div>
</div>

Affinché l’avviso venga formattato correttamente è necessario applicare un po’ di stile CSS, ecco un esempio:

#orientation-lock {
  position: fixed;
  width: 100%;
  height: 100vh;
  inset: 0;
  z-index: 99999;
  background: #EEE;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-family: sans-serif;
}

.orientation-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
}

.orientation-warning .rotate-icon {
  width: 80px;
  margin-bottom: 20px;
  opacity: 0.8;
}

Rilevare l’orientamento con Javascript

Perché tutto funzioni è necessario aggiungere un po’ di codice Javascript attraverso il quale rilevare l’orientamento dello schermo dello smartphone:

const REQUIRED_ORIENTATION = 'portrait'; // oppure 'landscape'

function isPhone() {
  return window.innerWidth < 768;
}

function checkOrientation() {
  const lock = document.getElementById('orientation-lock');
  const isLandscape = window.matchMedia("(orientation: landscape)").matches;
  const isPortrait = window.matchMedia("(orientation: portrait)").matches;

  const shouldBlock =
    (REQUIRED_ORIENTATION === 'portrait' && isLandscape) ||
    (REQUIRED_ORIENTATION === 'landscape' && isPortrait);

  if (isPhone() && shouldBlock) {
    lock.style.display = 'flex';
  } else {
    lock.style.display = 'none';
  }
}

checkOrientation();
window.addEventListener('resize', checkOrientation);
window.addEventListener('orientationchange', checkOrientation);

Se l’utente proverà a ruotare il dispositivo in orizzontale (nel nostro esempio la modalità richiesta è “portrait”) quello che visualizzerà sarà una schermata come questa:

Se volessimo fare il contrario (cioè impedire la visualizzazione in verticale) basterebbe semplicemente cambiare la prima riga del codice Javascript in questo modo:

const REQUIRED_ORIENTATION = 'landscape';

Soluzione in “puro CSS” (no Javascript)

Volendo è possibile implementare anche una soluzione che sfrutta unicamente CSS per mostrare la schermata di blocco. Per farlo basta aggiungere, al CSS già visto sopra, queste poche righe di codice:

@media screen and (orientation: landscape) and (max-width: 768px) {
  body > *:not(#orientation-lock) {
    display: none;
  }

  #landscape-lock {
    display: flex !important;
  }
}

Il CSS qui sopra blocca la visualizzazione “landscape” quindi il sito può essere visto solo in verticale. Per ottenere l’effetto contrario basta modificare la media query sostituendo a orientation: landscape la dicitura orientation: portrait.

Conclusioni

Bloccare la visualizzazione di un sito o di una web-app in landscape o portrait su smartphone è una tecnica utile in molti contesti applicativi.

Anche se i browser non permettono un blocco nativo, è possibile implementare una soluzione elegante e compatibile con un semplice overlay in HTML, CSS e JavaScript.

Una buona UX mobile non dipende solo da un layout responsivo, ma anche da scelte mirate all’orientamento e alla fruibilità del contenuto.

Domande Frequenti