• 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

26 Ottobre 2015
8
0
0
33
Miglior risposta
0
#1 Autore del topic
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 Web di prova
 

Lexus9091

Utente Attivo
4 Dicembre 2010
478
5
39
Roma
Miglior risposta
0
#2
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?
 
26 Ottobre 2015
8
0
0
33
Miglior risposta
0
#3 Autore del topic
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
 

Lexus9091

Utente Attivo
4 Dicembre 2010
478
5
39
Roma
Miglior risposta
0
#4
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:
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/mobile/
RewriteRule .* /mobile/ [R]
Adesso la Viewport e relativi codici adattati per qualsiasi tipo di dispositivo:

PHP:
<!-- Configuro la ViewPort !-->
<meta name="viewport" content="width=device-width, user-scrollbar=no">
<!-- File CSS per sito da Mobile  !-->
<link href="_mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<!-- File CSS per sito da Desktop !-->
<link href="_desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 700px)">
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:
26 Ottobre 2015
8
0
0
33
Miglior risposta
0
#5 Autore del topic
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:
26 Ottobre 2015
8
0
0
33
Miglior risposta
0
#6 Autore del topic
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
Responsive Web Site


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:

Lexus9091

Utente Attivo
4 Dicembre 2010
478
5
39
Roma
Miglior risposta
0
#7
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


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.
 
26 Ottobre 2015
8
0
0
33
Miglior risposta
0
#8 Autore del topic
Screenfly / Test Your Website at Different Screen Resolutions

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:

Matheeus

Amministratore
Amministratore
Redattore
28 Dicembre 2006
3.739
356
124
Aversa
Miglior risposta
0
#9
Quello che tu vuoi realizzare è un template responsive, 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).
 
Shoutbox
  1. S Santa Elera: Ho un problema con il mio telefonino
  2. S Santa Elera: C'è qualcuno che può aiutarmi?
  3. #KiK #KiK: CAFONE
  4. #KiK #KiK: ma come parla
  5. 404NotFound 404NotFound: figa
  6. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  7. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  8. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  9. Forzaese23 Forzaese23: retro babbo
  10. #KiK #KiK: createlo amikoooo
  11. B bbhojjjj76: fake login habbo ne avete?
  12. N NeroWhite BO: Buonasera
  13. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  14. #Egzon14 #Egzon14: habbo passerà ad unity
  15. #KiK #KiK: ma infatti
  16. #Egzon14 #Egzon14: ancora con sti retro habbo
  17. M mikiamo2012: Qualcuno per creare retro habbo?
  18. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  19. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  20. #Egzon14 #Egzon14: è proprio morto sciax2
  21. #KiK #KiK: Amiciii come statee
  22. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  23. LogR LogR: Cerco tutto lo staff per il mio retroserver
  24. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  25. A AnonymousOwna: Lubex Hotel è online vi aspetto
Top