• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema risolto Rendere layout mobile friendly

marcoverri

Nuovo utente
Autore del topic
26 Ottobre 2015
8
0
Miglior risposta
0
Ciao ragazzi!
Potreste aiutarmi con questo mio grattacapo?
Come rendere il layout al link mobile friendly? Di per se non è concepito per il mobile, però come si potrebbe adattare al mobile?
grazie

PS link
Perfavore, Entra oppure Registrati per vedere i Link!
 
Ciao.

Parti dal presupposto che necessiterai di parecchie righe di codice in più per riuscire nell'intento, per Apple utilizzerai la ViewPort, mentre su altri dispositivi ti consiglio di utilizzare fogli di stile CSS predesignati.
Tuttavia, se disponi di Google Chrome installato, puoi verificare dinamicamente il contenuto mostrato per Mobile (Con un'ampia scelta di dispositivi possibili) cliccando sulla pagina (Tasto destro), Ispeziona elemento e selezioni quella piccola icona in alto a sinistra della Console che assomiglia ad un iPhone, poi imposti il dispositivo e ti converte la viewport in modo dinamico.


Utilizzi Apache come WebServer?
 
Si, utilizzo un web server apache perchè è un hosting linux.
Il mio dubbio,a parte che non ho mai fatto tale "adattamento", è che il layout con il menu nella colonna di sx e il contenuto nella colonna di dx vengano mostrati in maniera errata su dispositivi mobili
 
Bene, prima di tutto modifica il file .htaccess, affinché se un utente visiti il sito per PC da iPhone, venga redirectato alla pagina /mobile/index

PHP:
Perfavore, Entra oppure Registrati per vedere i codici!

Adesso la Viewport e relativi codici adattati per qualsiasi tipo di dispositivo:

PHP:
Perfavore, Entra oppure Registrati per vedere i codici!

Dove "_mobile.css" è il file CSS per il Layout da Mobile, mentre "_desktop.css" è il file CSS per il Layout da Desktop.

Quanto a riadattamento, temo tu debba farlo per forza a mano.
Avvaliti dell'ispeziona elemento di Chrome come ti ho suggerito prima per testare il corretto funzionamento dei codici per Mobile.

Edit: Dimenticavo di dirti che ci sono sintassi di CSS sviluppate apposta dalle ditte sviluppatrici del Browser Mobile, ti consiglio di farti una bella ricerca per il Web se vuoi creare un sito completo e compatto.
Potresti ad esempio imparare ad utilizzare jTouch (Framework simile a jQuery) oppure optare per un Bootstrap già configurato.

Queste sono le possibili soluzioni, a te la scelta! ;)
 
Ultima modifica:
Il layout deve restare uguale...per come è adesso, come penso tu abbia capito, nel body c'è una tabella con due colonne.
Vorrei lasciare la parte destra così come appare (anche se nella home, non avendo testo, credo che sembri una barzelletta visto che c'è solamente il logo senza testo...a meno che non esista fare una home dedicata esclusivamente per il mobile), mentre nella parte sinistra creare un menu che si va a nascondere mostrando il pulsante...credo sia il male minore riconcepire il menu, oppure sono fuori strada?
 
Ultima modifica:
Ho fatto qualche passo avanti, però non ho messo i meta che mi hai indicato tu...
Il problema resta eguagliare il menu della vecchia versione....:emoji_confused:
Ho anche impostato i corpi delle font in base alle larghezze dei display
Perfavore, Entra oppure Registrati per vedere i Link!



Edit: Nonostante il tag <html class="js" lang="it"> il menu "Voce3" si apre in automatico già all'apertura della pagina, cosa che però prima non accadeva
 
Ultima modifica:
Capisco, adesso non che sia di mio interesse ma un sito Web Mobile con questo Layout non è affatto intuitivo, ne pratico da utilizzare.

Supponiamo che un utente si colleghi da Mobile per visualizzare questo Layout, non pensi che potrebbe non trovarsi bene navigandosi nel sito?
Ti allego una piccola App Chat che avevo sviluppato io in JavaScript, HTML e CSS

Perfavore, Entra oppure Registrati per vedere i Link!

Come vedi, il layout raccomandato per Mobile è quello semplice, facilmente utilizzabile e pulito.

Prova a rifletterci, sono sicuro che non è proprio il Layout da desktop che vorresti convertire, pensa ad un Utente che si collega al tuo sito quanta difficoltà possa fare per navigare da Mobile.
 
Perfavore, Entra oppure Registrati per vedere i Link!


In questo test sembra comportarsi bene, penso che avendo aggiunto un po' di regole css già va meglio...però proprio non capisco cosa succede alle sottovoci del menu

Purtroppo il layout deve essere quello, altrimenti sarebbe semplice andare e rimodulare l'header con un menu orientato in orizzontale
 
Ultima modifica:
Quello che tu vuoi realizzare è un
Perfavore, Entra oppure Registrati per vedere i Link!
, ossia un template che si adatta dinamicamente a seconda della risoluzione e grandezza della finestra/display (dunque appunto "risponda" a determinati contesti) e dunque riorganizzi e ridimensioni i contenuti in base al nuovo contesto in cui si trova.

A mio avviso però, un template già realizzato come semplice fixed o fluido difficilmente lo rendi responsive, si fa meno fatica a riprogettarlo da 0 come responsive.

(e comunque l'approccio con sito alternativo per i dispositivi mobile è superato da tipo 4/5 anni, per molteplici motivi sia di SEO che di lavoro aumentato).