Sto rendendo mobile-friendly un sito. Per la prima volta parto da zero (di solito parto da un sito già abbastanza responsive). Sto scrivendo il css per i dispositivi mobile chiamando la media query.
Come mai le differenze compaiono solo al refresh del browser con finestra ristretta-allargata rispetto a prima e non al suo ridimensionamento in "real-time"?
Come mai? Se non ci dici cosa hai fatto o ancora meglio un link online per vedere in azione la pagina, solo Mago Merlino ti può dire come mai?
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Grazie per la risposta, purtroppo non posso linkare... Mi rendo conto del limite delle mie indicazioni, ma pensavo ci fosse un motivo a voi noto/ovvio per cui il sito non reagisse in maniera automatica al ridimensionamento del browser, ma solo post-ridimensionamento+refresh.
Cioè di solito con i siti Wordpress, per esempio, prendo l'angolo del browser e vedo il sito mutare in base alle dimensioni della finestra. Nel mio caso invece, non cambia "real time", ma devo prima ridimensionare la finestra e poi refresh, per vedere modifiche responsive.
Capisco il tuo problema ma senza vedere nulla come si può fare per capire cosa c'è di sbagliato o di insolito nella tua pagina, sicuramente qualche conflitto o errore nel codice ma da questa parte non si può neanche immaginare a naso
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Quoto quanto indicato da carlomarangoni.
E' necessario che tu fornisca maggiori dettagli altrimenti è molto difficile che tu possa ricevere un qualche aiuto.
Il comportamento che descrivi non ha cause così ovvie da poterle identificare senza vedere la pagina in questione o un minimo di codice per poter provare a riprodurre il problema.
Si potrebbero solo fare delle ipotesi rischiando di dilungarsi su ragionamenti inconcludenti e inutili.
Ok che tu parta da un sito non-responsive ma bisogna capire come è concepito il layout originale e quali siano gli effettivi contenuti su cui agisce il css in questione.Sto rendendo mobile-friendly un sito. Per la prima volta parto da zero
In linea generale esistono tre modi per dichiarare una media query. Potrebbe essere utile capire come tu la stia specificando.Sto scrivendo il css per i dispositivi mobile chiamando la media query.
Puoi postare un esempio?
Per ipotesi, è possibile che qualche JavaScript/jQuery agisca, al resizing della finestra, sugli elementi della pagina e contrasti quindi con la normale risposta che in generale avverrebbe al ridimensionamento.Come mai le differenze compaiono solo al refresh del browser
Oppure, come già indicato da carlomarangoni, è possibile che ci siano conflitti o errori di vario genere sul codice, per cui il browser potrebbe rispondere in modo imprevedibile.
Hai verificato, con gli opportuni validatori, se il codice HTML della pagina e il CSS risultano validi?
(vedi Unicorn, Nu Html Checker, CSS Validation Service, o altri validatori che puoi trovare tra i link utili in fondo al capitolo 5)
Sarebbe utile anche sapere su quale browser riscontri tale comportamento; se hai provato o puoi provare con diversi altri browser e quale riscontro ottieni.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie per il supporto, ora ho molto materiale da verificare.
Comunque (per dare qualche riferimento) ho cominciato inserendo nell'<head>
e in mobile.css:codice:<meta name="viewport" content="width=device-width" > <link rel="stylesheet" type="text/css" href="/template/css/mobile.css" />
Mi confermate comunque che la reattività immediata, ridimensionando la finestra del browser, è la condizione "default" di un css che funziona?codice:@media (max-device-width : 800px) {...}
max-device-width è una mediaquery che controlla la dimensione del device, non quella del viewport. Nell'ambito mobile le due dimensioni normalmente coincidono, ma in ambito sviluppo su desktop invece no
cambia max-device-width in max-width e le modifiche saranno dipendenti dalla dimensione del viewport (ovvero della finestra del browser)
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
Grazie!Originariamente inviata da fcaldera
Rispondi quotando
