Reindirizzare un sito web in base alla dimensione dello schermo

Reindirizzare un sito web in base alla dimensione dello schermo

Reindirizzare un sito web in base alla dimensione dello schermo con cui gli utenti stanno navigando sulle tue pagine web è importante; diventa fondamentale quando cerchi di migliorare la User experience (Ux) e le prestazioni del tuo sito o del tuo blog. Vediamo quindi come cambiare la risoluzione sito web in base alla risoluzione dello schermo.

La dimensione conta ma non è tutto

I migliori cellulari in commercio vantano una risoluzione dello schermo full HD 1920 x 1280 ma i web designer più esperti sanno che è una risoluzione calcolata in maniera diversa da come viene calcolata su un monitor 24 pollici o una TV 4k. infatti, arrivano massimo ad una risoluzione 720×375 poi questa si moltiplica grazie ad un sistema che non sto a spiegare, comunque basato sulla quantità di pixel. Quindi le immagini sul mobile non dovranno essere grandi ma profonde a livello di bit, colori e densità di pixel quindi ai ppi.

Qui trovi le dimensioni pagina web consigliare per mobile.

Iphone 6/7/8 dimensione schermo 375 x 667 Pixel

Galaxy S5 dimensione schermo 360 x 640 Pixel

Iphone X dimensione schermo 812 x 375 Pixel

Huawai P30 dimensione schermo 820 x 375 Pixel

Attenzione questa sarà la dimensione pagina web mostrata sul monitor di uno smartphone non la risoluzione del monitor, che come si vede dalle schede tecniche sono molto più alte. Reindirizzare un sito web in base alla dimensione dello schermo

Quindi possiamo dire che la dimensione di uno schermo, però, non coincide con la risoluzione che quindi sarà la nostra unità di misura per fare il Redirect. Conoscere la risoluzione dello schermo è il primo passo per pianificare il nostro lavoro di redirect.

Oltre ad avere la possibilità di reindirizzare gli utenti in base alla risoluzione dello schermo; sarà anche possibile mostrare un messaggio personalizzato in base alla dimensione. offrendo una migliore user experience ai tuoi visitatori.

Come reindirizzare un sito attraverso il file htaccess

Non sai qual’è la risoluzione del tuo schermo? Voi conoscere l’aspect ratio del tuo monitor? la densità dei pixel? la dimensione esatta dello spazio utile all’interno della finestra del browser? Verificalo on-line in modo semplice e veloce.

Strumento per conoscere la risoluzione dello schermo

Ottimizzare le immagini del tuo sito web è importante per essere più veloce sul web. Infatti, sapere come ottimizzare le immagini per il web è fondamentale per posizionarsi meglio sui motori di ricerca.

La risoluzione corrisponde al numero di pixel del monitor, in senso orizzontale e verticale, di cui si compone lo schermo. Questo strumento ci dirà subito sia la risoluzione del tuo monitor che la dimensione effettiva della finestra del tuo browser. Scopri la mia Risoluzione Monitor

Conoscere la risoluzione dello schermo per reindirizzare una pagina web

Un altro strumento che ci mostra la risoluzione dello schermo è data da questo tools offerto dal sito inglese Online tool to check screen resolution Uno strumento molto base ma efficace. Personalmente preferisco il primo sito perché mi offre di conoscere anche la risoluzione effettiva dello schermo.

Reindirizzare gli utenti di un blog verso diversi url in base alla risoluzione video del loro schermo.

Ho testato sul mio Blog di marketing e web design alcuni dei seguenti elementi, ma non l’intero set di regole. Tuttavia, supponendo che sia tutto corretto, potresti provare qualcosa del tipo:

<--! CODICE DA INSERIRE NEL FILE .HTACCESS -->
RewriteEngine On
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]
# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
# had to check, but I believe most mobile devices should send at
# least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]

Il codice per modificare l’htaccess ed utile alla completezza di questo tutorial l’ho trovato sul sito
Stackoverflow.com che offre soluzioni per webmaster.