Come impedire agli utenti desktop di visualizzare un sito

Hai un sito web e desideri impedire agli utenti da PC fisso o notebook (utenti desktop) di interagire con esso? Possiedi un sito web dedicato ai dispositivi mobili come smartphone o tablet e vorresti impedire agli utenti desktop di visualizzarlo ma non sai come fare?

A richiesta di un nostro lettore, in questo articolo andremo ad affrontare un argomento speciale sui siti web e sull’ottimizzazione per dispositivi mobili.

Mediamente durante lo sviluppo di un sito, si è predisposti a realizzarlo in modo da poter essere visualizzato su qualsiasi dispositivo esistente, fisso o mobile che sia, con ogni browser web.

Ogni sito web dovrà essere ottimizzato in base al device su cui viene caricato, possibilmente con versioni dedicate e correttamente configurate. Questa considerazione è valida specialmente su smartphone e tablet, che come ben si sa sono sottoposti a maggiore controllo da parte dei motori di ricerca (Google ad esempio) e una scorretta configurazione può portare anche a penalizzazioni SEO.

In alcuni casi però, può capitare che uno sviluppatore miri a realizzare una piattaforma dedicata esclusivamente ad uno solo dei due gruppi di utenti (desktop o mobile). Questo impone (per ovvi motivi) delle limitazioni, non sempre facili da implementare nel sito.

Il “blocco” del sito a smartphone e simili è stato spesso affrontato sul web, e attualmente si rivela una pratica facile da adottare tramite script e istruzioni al server.

Potrebbe interessarti: Come reindirizzare gli utenti alla versione mobile del sito

Al contrario invece, impedire agli utenti desktop di visualizzare un sito è molto più complicato. Questo perché con un computer qualsiasi e con una buona base di conoscenza informatica è possibile bypassare questi limiti.

D’altro canto, la stragrande maggioranza degli utenti non si scomoderà per superare i blocchi o non ne è proprio in grado. Preferendo dunque di visitare il sito da smartphone, come richiesto.

Qui di seguito vedremo alcuni metodi per bloccare l’apertura di un sito da desktop, con soluzioni differenti e facilmente personalizzabili.

Impedire la visualizzazione di un sito a utenti da PC

Se ti stai chiedendo se è possibile impedire ai visitatori da computer (PC, laptop, Mac e tutta la famiglia dei desktop devices), la risposta è “Sì“, è possibile.

Ciò non significa però che sia una cosa facile da fare, né che sia sempre efficace.

L’ambiente desktop è molto vasto e conta un grandissimo numero di dispositivi con hardware, sistemi operativi, user-agents, browser web e configurazioni diverse. Questo significa che ogni istruzione mirata alla limitazione di questi, potrebbe non essere sufficiente a bloccarli tutti.

Inoltre esistono tanti strumenti per simulare un ambiente mobile da poter adoperare per superare questi blocchi.

Leggi ad esempio: Visualizzare la modalità smartphone con il browser del PC

Detto questo, c’è anche da considerare che al giorno d’oggi ognuno di noi ha uno smartphone e la maggior parte delle persone usa proprio questo per navigare in internet, quindi difficilmente cercherà di superare i limiti imposti dal proprio laptop.

Se ciò non ti preoccupa, ora vediamo le tecniche che è possibile adottare.

Come fare

Queste sono le tecniche consigliate per impedire agli utenti desktop di visualizzare un sito realizzato per smartphone. Sono in ordine di difficoltà e alcune richiedono conoscenze minime in altri campi dello sviluppo web.

CSS

Senza impiegare troppo tempo nella realizzazione di script complessi e lunghi, possiamo affidarci al CSS e alla configurazione di specifiche regole di stile.

Un esempio:

/* Stile predefinito per mobile */body {
   color:#000;
   font-size:16pt;
   ...
}

/* Stile per dispositivi con larghezza maggiore di 600px */@media screen and (min-width:600px) {
   body {
      display:none;
   }
}

Queste istruzioni indicano che utilizzando un dispositivo con una larghezza maggiore di 600px, il tag “body” e tutti gli elementi verranno nascosti (display:none;).

Quindi, chiunque rientri nel blocco visualizzerà una pagina bianca, senza scritte.

Un sistema più efficace sarebbe quello di definire due “div” distinti al posto del body:

<html>
  <head>
    <style>
      /* Stile predefinito per mobile */      #div-mob{
        color:#000;
        font-size:16pt;
        ...
      }
      #div-pc{
        display:none;
      }
      /* Stile per dispositivi con larghezza maggiore di 600px */      @media screen and (min-width:600px) {
        #div-mob{
          display:none;
        }
        #div-pc{
          display:block;
        }
      }
    </style>
  </head>
  <body>
    <div id="div-mob">
      <h2>
        Sito mobile
      </h2>
    </div>
    <div id="div-pc">
      <h2>
        Visita dallo smartphone
      </h2>
    </div>
  </body>
</html>

Qui l’esempio interattivo su Codewith.it

Spiegazione: Al superamento dei 600px di larghezza, la sezione dedicata agli smartphone verrà nascosta, visualizzando un messaggio “Visita dallo smartphone“.

JavaScript

Così come con il CSS, anche JavaScript è facile da integrare per ottenere risultati simili.

Lo script che andremo a vedere servirà a rilevare lo user-agent del dispositivo, ignorando quelli che non rientrino nella lista e mostrando loro una pagina differente o (come in CSS) nascondendo gli elementi interessati.

Con redirect:

if (!((navigator.userAgent.match(/(iPhone)|(iPod)|(android)|(webOS)/i)))){
   location.replace("https://www.miosito.com/accesso-vietato");
}

Cambio stile CSS (ipotizzando gli elementi HTML visti in precedenza nella sezione CSS)

if (!((navigator.userAgent.match(/(iPhone)|(iPod)|(android)|(webOS)/i)))){
    document.getElementById("div-mob").style.display="none";
    document.getElementById("div-pc").style.display="block";
}

PHP

Questo metodo è probabilmente il più affidabile. Richiede una minima base di PHP per poter essere integrata altrimenti potrebbe generare errori.

Attraverso il PHP possiamo definire un’istruzione per identificare il dispositivo in uso (user-agent). Questo è totalmente gestito dal server, per cui più complicato da aggirare e ingannare.

function isMobile() {
   return preg_match("/(android|webos|avantgo|iphone|ipad|ipod|blackberry|iemobile|bolt|boost|cricket|docomo|fone|hiptop|mini|opera mini|kitkat|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
if(!isMobile()){
    header("Location: https://www.miosito.com/accesso-vietato");
}

La lista degli user agents non è completa, ma sono indicati i più presenti attualmente in commercio.

Questi metodi sono testati e funzionanti, facili da integrare in qualsiasi pagina web. Come già accennato, alcune restrizioni potrebbero essere aggirate da utenti più esperti. Ma ciò non deve comunque spaventare, poiché tutti gli altri con un PC verranno bloccati.

Si consiglia comunque di sviluppare una pagina dedicata agli utenti provenienti da computer, con le apposite istruzioni su come visualizzare il sito.

Se hai domande non esitare a scriverci un commento nel modulo in basso!

Leggi anche: Creare un sito multilingua con PHP

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle