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
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Recensione In Fuga. Ciclo Le Cronache dell’Ultimo Druido di Kevin Hearne
- Recensione Fool Moon di Jim Butcher
- Recensione Storm Front di Jim Butcher
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
5 commenti su “Come impedire agli utenti desktop di visualizzare un sito”
Ciao Simone
Grazie mille per l’articolo, tutto ok, prima di tutto scusami per il disturbo, volevo farti alcune domande, sto utilizzando il codice PHP
sostituendo “ilmiosito” con il nome del sito interessato, inserendo il codice in fondo wp-config e giusto?
il sito ovviamente non si apre da pc e va bene cosi, viene fuori pagina non trovata, ma visualizza ancora il menu con il nome il logo, volevo chiederti è possibile modificare tale avviso con una pagina esempio con un immagine da me creata che indica che per visualizzare bisogna collegarsi da smarphone? se con il PHP non è possibile puoi indicarmi quale codice utilizzare e dove inserire eventuale codice? grazie mille e scusami ancora per il disturbo
Ciao Luigi.
Con il PHP e WordPress è un po’ più complesso. Prima di tutto ti consiglio di fare un backup del sito, per ogni evenienza.
Non modificare wp-config. Metti il codice nel file functions.php del tema (su WordPress nel menu “Aspetto”, poi “Editor del tema”)
La pagina dedicata puoi realizzarla anche manualmente con un editor html se puoi, e non con WordPress e poi caricarla nel server. Questo perché functions.php interessa tutte le pagine del sito.
In caso estremo, sbirciando i plugin di WordPress ho trovato questi che potrebbero esserti utile:
– https://it.wordpress.org/plugins/wp-ban/
– https://it.wordpress.org/plugins/multi-device-switcher/
– https://it.wordpress.org/plugins/useragent-content-switcher/
Purtroppo non ho avuto ancora modo di testarli e non so dirti se funzionano bene.
Grazie mille Simone
Ci lavoro un pò e ti aggiorno se non diosturbo 🙂
Ciao Simone, grazie mille 🙂 le info sono state davvero utili
Volevo farti un altra domanda se non disturbo troppo, con questo codice riesco in quello che cercavo, ma se voglio che l’utente visualizzi solo una determinata pagina tramite pc, esempio una pagina che l’utente si modifica da solo, la cosa è possibile? esempio stavo pensando di realizzare una pagina iniziale dovo l’utente tramite user e pass potrà modificare come desidera, poi su questa pagina aggiungere un tasto esempio “continua” che porta al resto del sito, dove lui non potrà visualizzare e modificare tramite pc, e nemmeno da smrt ovviamente, oppure se la cosa è più semplice, autorizzare la visualizzazione e la modifica solo di una determinata pagina tramite “Ruolo predefinito nuovi utenti”
grazie mille spero di essere chiaro con la mia domanda
Ciao Luigi, nessun disturbo 🙂 .
Da quello che ho capito, hai bisogno di effettuare modifiche ad elementi presenti nella pagina e salvarle. Inoltre devi creare un sistema di accesso con email, user e password, con ruolo utente.
Purtroppo è complicato da realizzare ed hai bisogno almeno di un database su cui appoggiarti. Dovresti sviluppare il PHP e mySQL e non basterebbe un articolo per spiegarlo, ma di un corso di base.
Inizia con i fondamenti di PHP+MySQL per capire come gestire un database e i dati, poi passa alla realizzazione delle pagine.
Spero ti sia di aiuto.