rendere responsive pagina web app - Versione stampabile +- Forum di Matriz (https://www.matriz.it/forum) +-- Forum: Programmazione Web (https://www.matriz.it/forum/forum-26.html) +--- Forum: (X)HTML, CSS & JavaScript (https://www.matriz.it/forum/forum-28.html) +--- Discussione: rendere responsive pagina web app (/thread-688.html) Pagine:
1
2
|
rendere responsive pagina web app - Chandler - 03/10/2014 ciao Mattia, avrei bisogno di rendere responsive l'index di QUESTA web app! Mi puoi aiutare? Grazie RE: rendere responsive pagina web app - Mattia - 05/10/2014 Per cominciare, se usi Firefox, puoi utilizzare la "Visualizzazione flessibile" (dal menù "Sviluppo" o usando la combinazione di tasti CTRL+Maiusc+M) per vedere come si vede con le varie risoluzioni. RE: rendere responsive pagina web app - Chandler - 05/10/2014 Ciao Mattia, ho scoperto che rimuovendo la specifica width dalle classe .container del file layout.css il container diventa di fatto responsive. Il problema è che se provo a visualizzare la webapp dal mio iphone, i contenuti non vengono adattati come nell'immagine che ti allego. Cosa occorre fare? RE: rendere responsive pagina web app - Mattia - 06/10/2014 Il problema è che le immagini (più il padding) in orizzontale occupano più spazio di 320 pixel (larghezza della risoluzione più comune usata dagli smartphone). Infatti, guardando il sito con lo smartphone in orizzontale, dovresti vederlo bene. Per risolvere, puoi usare le media query e assegnare un padding orizzontale con un valore più basso o nullo, per le risoluzioni con una larghezza minore. Un esempio del codice CSS da aggiungere sarebbe questo (naturalmente potresti dover aggiustare i valori in pixel): Codice: @media (max-width: 479px) { /* Regole CSS per risoluzioni con larghezza inferiore allo "standard" degli smartphone messi in orizzontale (480 pixel) */ RE: rendere responsive pagina web app - Chandler - 06/10/2014 Grazie, adesso mi metterò a fare qualche prova! Inoltre sarebbe necessario che l'header (con logo) e il footer (con le icone delle sezioni) restino sempre visibili, quella che scrolla è la parte centrale. RE: rendere responsive pagina web app - Mattia - 08/10/2014 Per avere l'header e il footer fissi puoi utilizzare il valore fixed della proprietà position di CSS. Invece al contenuto devi togliere l'overflow valorizzato ad auto e aggiungere un padding in alto del valore dell'altezza dell'header e in basso del valore dell'altezza del footer. RE: rendere responsive pagina web app - Chandler - 09/10/2014 A questo punto mi interesserebbe diminuire lo spazio intorno alla foto dell'anime (nell'esempio in questione goku) e ridimensionare i 3 puntini di sospensione "...", i preferiti e le dimensioni della descrizione "aggiornato all'episodio..". RE: rendere responsive pagina web app - Mattia - 09/10/2014 Come sopra puoi utilizzare le media query e precisamente:
RE: rendere responsive pagina web app - Chandler - 10/10/2014 (09/10/2014 12:46)Mattia Ha scritto: Come sopra puoi utilizzare le media query e precisamente: Ciao Mattia, ho provato ad apportare le modifiche che mi hai detto, inoltre ho provato pure a cambiare il font della descrizione e dal mac lo vedo correttamente, mentre da iphone lo vedo come nell'immagine in allegato. (praticamente si perde il myriad che prima veniva letto correttamente). - ho diminuito il padding del div item-img da 3 a 1 - non so come diminuire lo span che contiene stella e puntini e dove applicare background-size col valore cover. - ho diminuito il valore font-size nonostante ciò è ancora tutto molto largo (forse perchè nn si ridimensionano ancora stellina e puntini) e perchè prende il font sbagliato... RE: rendere responsive pagina web app - Mattia - 10/10/2014 Per quanto riguarda il carattere, c'è un errore dove includi il font Myriad, perché includi contemporaneamente anche il font FutuLt. Se vuoi inserirli entrambi, devi usare un'istruzione @font-face per ognuno. Devi diminuire le dimensioni degli span con i selettori CSS ".item-drag span" e ".item-rate span". Agli stessi span devi aggiungere background-size col valore cover. RE: rendere responsive pagina web app - Chandler - 10/10/2014 ho apportato le modifiche che mi hai detto, adesso i font si vedono correttamente ma stella e puntini restano larghi... idem per lo spazio intorno alle thumb degli anime che è ancora parecchio. Potresti vedere se il discorso degli span l'ho fatto correttamente? RE: rendere responsive pagina web app - Mattia - 11/10/2014 Per quanto riguarda il background-size con valore cover, lo hai fatto correttamente, anche se potevi utilizzare la stessa istruzione senza crearne una nuova. Hai dimenticato di mettere nella media query l'istruzione per dare una dimensione minore ai due span. RE: rendere responsive pagina web app - Chandler - 11/10/2014 ehmm, se mi dici come fare lo faccio! RE: rendere responsive pagina web app - Mattia - 11/10/2014 Dentro alla media query: Codice: @media only screen and (max-width: 480px) Aggiungi (naturalmente i valori in pixel sono stati messi a caso): Codice: .item-drag span{ RE: rendere responsive pagina web app - Chandler - 11/10/2014 Allora, ho applicato le istruzioni che mi hai dato ed settato i valori appropriati. A questo punto: - la header (comprensiva del box con la scritta "tutti le serie anime in italiano") è troppo alta e occupa troppo spazio nel display. Attualmente occupa circa 300 px di altezza e dovrebbe occuparne almeno 210 px mantenedo le proporzioni che ha adesso. - lo spazio intorno alle thumb degli anime è ancora tanto. - il testo della descrizione nell'immane iniziale stava in una riga, dall'iphone la vedo sempre su due righe (e non credo sia solo questione di grandezza del testo). Probabilmente bisogna stringere il margine tra la thumb e il testo. - ho sistemato le dimensioni dei puntini di sospensione, ma adesso ne vedo solo uno. - ho sistemato le dimensioni della stellina, ma se ci fai caso subito sotto si intravede la punta della stella ripetuta. Inoltre non funziona l'attivazione/disattivazione della stellina. - anche l'effetto di selezione dell'intera riga/box del manga non funzia ancora. Come dovrei fare? Ti allego png di come la vedo e di come dovrebbe vedersi. Grazie RE: rendere responsive pagina web app - Mattia - 11/10/2014
RE: rendere responsive pagina web app - Chandler - 12/10/2014 Ciao Mattia, 1) allora sono riuscito a ridurre header e h1, anche se non sono sicuro di averlo fatto correttamente! praticamente ho messo questo: Codice: header{ Codice: section{ 2) pur diminuendo il padding del div delle immagini e della descrizione non mi cambia nulla. il codice che ho modificato è questo: Codice: .item-img img{ 4) ho messo il selettore ma non succede nulla, tra l'altro ce n'era uno abbastanza simile: Codice: section ul.animelist li:hover{ Codice: footer{ ma mi ha sballato tutto! Inoltre la selezione di ogni sezione la vedo da safari del mac, ma non sul safari dell'iphone. Sapresti dirmi il perché? Per il momento è tutto, ti prego di darmi na mano! RE: rendere responsive pagina web app - Mattia - 13/10/2014
RE: rendere responsive pagina web app - Chandler - 13/10/2014 1) Ok, ma il logo resta decentrato, sai dirmi perché? 2) metto il padding nel div item-img ma continua a non cambiare nulla. 3) dovrà accadere che si attiva la stellina se è uno dei preferiti, ma questa cosa andrà vista in un secondo momento in programmazione. 4) ho decommentato e adesso funziona sul safari del mac, ma continuo a non vederlo da iphone (stesso discorso con la selezione della sezione nel footer). Dovrebbe anche funzionare che i 3 punti e la descrizione diventano bianchi alla selection (come nell'immagine che avevo allegato inizialmente). Inoltre dovrei fare in modo che al click/tap dei tre punti mi slittil'elenco e mi compaia del testo (come nell'immagine in allegato). 5) il footer adesso si vede bene, ma occupa troppo spazio, vorrei renderlo alto almeno 80/90px e ridimensionare tutto in maniera proporzionata (così come ho fatto per l'header). RE: rendere responsive pagina web app - Mattia - 13/10/2014
RE: rendere responsive pagina web app - Chandler - 13/10/2014 mi stavi più simpatico quando mi incollavi pezzi di codice per farmi degli esempi! Cmq in breve: 1) ho tolto la posizione assoluta e inserito questo: Codice: h2{ 2) ho risolto col padding laterale e superiore, restano i trattini che sono troppo distanti dalla foto, dovrei tirarli un po' su. Ho provato con padding-bottom ma non funzia. 3) OK 4) adesso dovrebbe funzionare al tap, anche se continuo a non vederlo correttamente nell'app (probabilmente perché collega il tap ad un collegamento e prova a portarmi da un'altra parte senza darmi il tempo di vedere l'effetto). I tre puntini non riesco a farli diventare bianchi nella selezione e neri quando li tappo. Per il javascript non ho idea su cosa fare. 5) ho tolto l'altezza e modificata solo in a dentro la mediaquery, ma le icone e le scritte sono abbastanza decentrate anche qui. 6) per le sezioni del menu del footer, vorrei fare in modo che tappando la sezione, mi resti selezionata con la fascetta superiore arancio. (almeno capisco se così si vede da app). RE: rendere responsive pagina web app - Mattia - 14/10/2014
RE: rendere responsive pagina web app - Chandler - 15/10/2014 (14/10/2014 14:22)Mattia Ha scritto:1) ho eliminato le istruzioni e lasciato background e text-indent eppure il logo continua ad essere decentrato. 2) OK 3) OK 4) ho aggiunto l'istruzione onlclick (dovevo aggiungerla dopo href o dovevo metterla al posto suo?), ma non riesco ancora a vedere da iphone l'effetto al tap. OK per i 3 puntini bianchi di selezione, come metto quelli neri di quando i 3 punti sono tappati/selezionati? 5) OK. Sono riuscito a rimpicciolire le iconcine, tirare su il testo con line-height e riallineato le iconcine modificando background-position. Spero di aver fatto bene. 6) L'effetto active c'è già, ma come per i box degli anime non riesco a vederlo da iphone. Inoltre, in questo caso vorrei appunto mantenere l'effetto "selezionato" dopo al click/tap 7) Avevo dimenticato di mettere il baloon "informazioni" in alto a dx. Ho provato a inserirlo come h3, ma anche qui sbaglio qualcosa e non riesco a centrarlo in altezza nell'header. La soluzione migliore? RE: rendere responsive pagina web app - Mattia - 15/10/2014 1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza). 4) Cliccando sulla riga cosa deve succedere? Deve solo colorare la riga? Quando si clicca sui puntini cosa deve succedere (non credo di aver capito i due stati)? Probabilmente non ho capito cosa intendi per "tab"; quando col dito tocchi l'iPhone è come se facessi un clic sul computer. 6) Dipende tutto da cosa deve succedere dopo che hai cliccato sulle voci del menù del footer. Se cambi pagina, basta che in quella pagina assegni una classe alla voce selezionata che mostra la riga. 7) Io lo vedo in alto a destra. Se vuoi che l'immagine sia allineata verticalmente al centro, devi aumentare l'altezza e posizionare l'immagine di sfondo al centro. RE: rendere responsive pagina web app - Chandler - 15/10/2014 (15/10/2014 12:44)Mattia Ha scritto: 1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza). 1) su h2.logo non c'è più la larghezza, ho lasciato solo background e text-indent. Se tolgo la larghezza nella mediaquery mi allarga in logo in maniera spaventosa. 4) Cliccando sulla riga (quando funzionerà tutto correttamente) si collegherà ad un'altra pagina, ma prima di portarmici al tap (e con tap intendo "tocco col dito") sarebbe figo se si vedesse la selezione arancione. Se invece clicci SOLO sui 3 puntini, questi si selezionano e mi viene mostrato dell'ulteriore testo di descrizione che prima veniva nascosto (come ti avevo fatto vedere nella png di QUESTO msg). 6) sempre ad app funzionante mi porterà nella sezione cliccata/tappata dove resterà SELEZIONATA la sezione dove mi trovo. 7) ho provato a mettere center 0 nell'istruzione background ma non è cambiato nulla, potresti incollarmi il codice corretto? Grazie RE: rendere responsive pagina web app - Mattia - 15/10/2014 1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size. 4) L'unico modo che mi viene in mente per lo sfondo arancione al clic è di utilizzare l'active o eventualmente l'hover per gli schermi touch. Per quanto riguarda i puntini, devi aggiungere un evento onclick che richiamerà una funzione JavaScript che potrebbe essere una cosa del genere: Codice: function openDescrizione(a, d) { Il codice HTML dei puntini sarà una cosa del genere: Codice: <a href="#" onclick="openDescrizione(this, document.getElementById('id_del_div_col_testo');return false;">Puntini</a> 7) Anche qui devi mettere il valore contain a background-size e, invece di "center 0", metti "center center". RE: rendere responsive pagina web app - Chandler - 16/10/2014 (15/10/2014 17:44)Mattia Ha scritto: 1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size. 1) OK. Ho risolto, aggiungendo un margin-top di qualche pixel (per abbassare il logo dal margine superiore). 4) per l'evento javascript ho sicuramente sbagliato qualcosa. 6) HAI DIMENTICATO DI RISPONDERE A QUESTO PUNTO. 7) OK RE: rendere responsive pagina web app - Mattia - 17/10/2014 4) Hai aperto e chiuso subito il tag a. Puoi fare tre cose:
6) Non ho risposto, perché avevo già scritto nel messaggio precedente che, cambiando pagina, basta assegnare una classe (che farà comparire il bordo arancione) alla voce del menù selezionata. RE: rendere responsive pagina web app - Chandler - 19/10/2014 4) ho provato la terza opzione, ma continua a nn funzionare, non potresti darmi te il codice esatto? 6) in quello che dici stai valutando il fatto che se ad esempio sarò nella sezione "preferiti", il bordo arancione sarà fisso (per far capire che siamo dentro quella sezione). Grazie RE: rendere responsive pagina web app - Mattia - 20/10/2014 4) Ecco il codice: Codice: <div class="item-drag"> 6) Sì, quando sarai nella pagina dei "Preferiti", la voce del menù "Preferiti" avrà la classe che assegna il bordo arancione. |