Risposta Stile Testo Dimensione:  10 12 14 16 18 20 24 30 Colore:  Rosso Viola Verde Blu Giallo Grigio Arancio Rosa Allinea:  Centrato Giustificato Linea vuota A capo Altri comandi Emoticons Clicca per riportare il codice nell'area di testo oppure posizionati su un'immagine per vederne il relativo comando. Testo In risposta a Alecos [quote=Alecos] [quote] [quote] Marco per ripristinare il layout desktop devi solo togliere: <meta name="viewport" content="width=device-width, initial-scale=1"> che fa partire il sito con lo zoom, lascia messo come hai fatto html * {max-height: 1000000px; } e dovrebbe funzionare bene, in questo modo disattivi il Font Boosting, il sito parte con il layout desktop, chi vuole può fare lo zoom... Ciao [/quote] Come dicevo in un post precedente,la tua soluzine non funziona per risolvere il problema che ho. Il discorso dello zoom e' un piccolo problema rispetto alla situazione di prima. Considera che questo non e' certo un sito nato per dispositivi mobile, che funzioni in modo un po' approssimativo su di essi ci sta anche. [/quote] A me sul mio sito funziona, l'ho messo in tutti i fogli di stile e guardando il mio sito da Chrome tramite Android lo vedo correttamente, lo vedo in versione desktop con i font correttamente e posso fare lo zoom per ingrandire il sito, mi spiace che a te non funzioni forse con le tabelle quell'hack non va? Io che ho tutti div/span mi funziona bene ho anche provato a mettere la viewport con il meta ma come dicevo usando il meta fa lo zoom e il mio sito non ha più problemi di font boosting ma si vede ingigantito come se ci fosse la lente di ingrandimento, un pò bruttino direi per cui ho deciso di tenere il mio hack, finalmente entrando da google chrome su android vedo il mio sito per intero in tutta la sua altezza senza font boosting, speravo sinceramente funzionasse anche da te Perché usare questo hack? Safari e Chrome e Opera mobile quando trovano degli elementi con altezza dinamica non dichiarata apertamente calcolano in modo approssimativo i font da usare per quel layout e ingrandiscono i font a volte in modo inesatto per cui magari un semplice div.prova con { width: auto; height: auto; } viene calcolato erroneamente e vien ingigantito il font anche se li andava un font corpo 12 invece di 22. Cosa fa il mio hack? Grazie al selettore universale * imposta per ciascun elemento un massimo valore di altezza impossibile per cui quando i browser mobili appena citati tentano di calcolare il font si accorgono che il div, o quello che è, è troppo alto e non toccano i font che restano corpo 12 per fare un esempio... Esempio: ------------------------------- | div dinamico con font 12 ------------------------------- diventa ------------------------------ | div dinamico con fon ingrandito 22 ------------------------------ questo non accade se il div ha una sua altezza dichiarata ------------------------------- | div statico altezza 200px; il font resta corpo 12 ------------------------------- Questo mio hack azzera il calcolo che quei browser fanno sugli elementi non dichiarati in altezza, poiché quasi nessuno mette un div con altezza fissa ecco che il 90% dei siti è afflitta da questo bug... In definitiva per non usare l'hack bisogna: 1) avere su ciascun elemento css un valore in altezza fisso 2) usare il valore di precedenza !important sul font size Due condizioni che quasi nessuno usa o adotta per vari motivi tecnici... esempio, supponiamo che sviluppi una app in php e popoli gli elemeti html in modo dinamico per cui non sai quanto sarà alto quel div perché dipende dai valori che spari a video, altro esempio supponiamo che tu abbia una photo gallery in php e la pagina si riempie man mano che carichi delle foto, più foto metterai più alto sarà il valore del wrapper (div) che ingloba gli altri div/span, quindi non potrai dare un valore assoluto al tuo wrapper perché faresti collassare tutti gli elementi che ad un certo punto verranno tagliati fuori dal wrapper e non saranno più visibili... le foto (5 foto) magari occupano in altezza 500px mentre 10 foto occupano 1000px non puoi dare al tuo div wrapper un valore assoluto 500px perché non vedresti le restanti 5 foto di 10 per cui sei obbligato a non imporre un valore fisso, questo avrà una certa rilevanza a livello di rendering sui dispositivi mobili che non trovando un valore in altezza dichiarato calcoleranno a modo loro quell'altezza modificando i font associati al wrapper, in questo modo potrebbe succedere questo: <h1>Titolo</h1> <p>[size=30]paragrafo[/size]</p> Come puoi vedere nell'esempio il paragrafo sarà più grande del titolo (h1) e questo perché magari con diversi div annidati non c'è un vero valore in altezza esplicito... quello che nella fattispecie capitava a me era il seguente: i titoli h1, h2, h3, h4, h5 erano più piccoli del font dentro un div io avevo ad esempio h1 che era tipo corpo 28 e il font di un div interno dinamico di corpo 12, Chrome cosa faceva? mostrava h1 piccolo e il font dentro il div annidato gigantesco, sproporzionato rispetto ad h1... mettendo la regola html * {max-height: 1000000px; } io obbligo Chrome a non toccare i font, lo zoom si può sempre fare, questo non preclude lo zoom che è sempre usabile ma azzera il problema del font boosting... a questo punto credo di averlo spiegato in tutte le salse, forse su layout tabellari non funziona oppure è ininfluente so solo che a me ha risolto il problema alla radice e ho testato il mio sito su diversi browser mobili e va benissimo... mi spiace che non funzioni a Marco ma credo sia colpa delle tabelle... Comunque gli hack nascono come soluzioni a bug temporanei infatti una volta trovato il modo di eliminare il bug si può ripristinare il foglio di stile come era prima dell'hack... [url=https://en.wikipedia.org/wiki/Google_Chrome_for_Android]https://en.wikipedia.org/wiki/Google_Chrome_for_Android[/url] [i]Font Boosting is used when text on the website is too small to be read properly. It uses an algorithm to increase font sizes when necessary, aiming to make the text readable regardless of the zoom level.[/i] Questo significa che Chrome, Opera e Safari interpretano a modo loro i font in rapporto agli elementi html/css valutati... [url=https://productforums.google.com/forum/#!topic/chrome/hxA5x2LlgBA]https://productforums.google.com/forum/#!topic/chrome/hxA5x2LlgBA[/url] [url=http://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font]http://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font[/url] Scusate se parlo impropriamente di 'mio hack', non è mio ma l'ho adottato... quindi è mio in senso lato... [/quote] formattazione A sinistra Giustificata Nessuna

07 Aprile 2013 Postato da: Mak73 Problemi con il sito

Oggi ho dovuto fare alcuni aggiornamenti e purtroppo immagino che alcuni di voi avranno avuto dei problemi, scrivo questo quindi per scusarmi dei eventuali disagi creati. Colgo anche l'occasione per chiedervi di segnalare eventualmente dei problemi strani, purtroppo per quanto si possa testare in locale, poi ci possono essere dei problemi non considerati. Vi ringrazio per la pazienza.

Commenti: 497  Aggiungi - Pagine: 1...-21-22-23-24-25

Alecos Post inviati: 1615	Commento Alecos 13 Dicembre 2016    11:57:40
	Citazione Citazione Marco per ripristinare il layout desktop devi solo togliere: <meta name="viewport" content="width=device-width, initial-scale=1"> che fa partire il sito con lo zoom, lascia messo come hai fatto html * {max-height: 1000000px; } e dovrebbe funzionare bene, in questo modo disattivi il Font Boosting, il sito parte con il layout desktop, chi vuole può fare lo zoom... Ciao Come dicevo in un post precedente,la tua soluzine non funziona per risolvere il problema che ho. Il discorso dello zoom e' un piccolo problema rispetto alla situazione di prima. Considera che questo non e' certo un sito nato per dispositivi mobile, che funzioni in modo un po' approssimativo su di essi ci sta anche. A me sul mio sito funziona, l'ho messo in tutti i fogli di stile e guardando il mio sito da Chrome tramite Android lo vedo correttamente, lo vedo in versione desktop con i font correttamente e posso fare lo zoom per ingrandire il sito, mi spiace che a te non funzioni forse con le tabelle quell'hack non va? Io che ho tutti div/span mi funziona bene ho anche provato a mettere la viewport con il meta ma come dicevo usando il meta fa lo zoom e il mio sito non ha più problemi di font boosting ma si vede ingigantito come se ci fosse la lente di ingrandimento, un pò bruttino direi per cui ho deciso di tenere il mio hack, finalmente entrando da google chrome su android vedo il mio sito per intero in tutta la sua altezza senza font boosting, speravo sinceramente funzionasse anche da te Perché usare questo hack? Safari e Chrome e Opera mobile quando trovano degli elementi con altezza dinamica non dichiarata apertamente calcolano in modo approssimativo i font da usare per quel layout e ingrandiscono i font a volte in modo inesatto per cui magari un semplice div.prova con { width: auto; height: auto; } viene calcolato erroneamente e vien ingigantito il font anche se li andava un font corpo 12 invece di 22. Cosa fa il mio hack? Grazie al selettore universale * imposta per ciascun elemento un massimo valore di altezza impossibile per cui quando i browser mobili appena citati tentano di calcolare il font si accorgono che il div, o quello che è, è troppo alto e non toccano i font che restano corpo 12 per fare un esempio... Esempio: ------------------------------- | div dinamico con font 12 ------------------------------- diventa ------------------------------ | div dinamico con fon ingrandito 22 ------------------------------ questo non accade se il div ha una sua altezza dichiarata ------------------------------- | div statico altezza 200px; il font resta corpo 12 ------------------------------- Questo mio hack azzera il calcolo che quei browser fanno sugli elementi non dichiarati in altezza, poiché quasi nessuno mette un div con altezza fissa ecco che il 90% dei siti è afflitta da questo bug... In definitiva per non usare l'hack bisogna: 1) avere su ciascun elemento css un valore in altezza fisso 2) usare il valore di precedenza !important sul font size Due condizioni che quasi nessuno usa o adotta per vari motivi tecnici... esempio, supponiamo che sviluppi una app in php e popoli gli elemeti html in modo dinamico per cui non sai quanto sarà alto quel div perché dipende dai valori che spari a video, altro esempio supponiamo che tu abbia una photo gallery in php e la pagina si riempie man mano che carichi delle foto, più foto metterai più alto sarà il valore del wrapper (div) che ingloba gli altri div/span, quindi non potrai dare un valore assoluto al tuo wrapper perché faresti collassare tutti gli elementi che ad un certo punto verranno tagliati fuori dal wrapper e non saranno più visibili... le foto (5 foto) magari occupano in altezza 500px mentre 10 foto occupano 1000px non puoi dare al tuo div wrapper un valore assoluto 500px perché non vedresti le restanti 5 foto di 10 per cui sei obbligato a non imporre un valore fisso, questo avrà una certa rilevanza a livello di rendering sui dispositivi mobili che non trovando un valore in altezza dichiarato calcoleranno a modo loro quell'altezza modificando i font associati al wrapper, in questo modo potrebbe succedere questo: <h1>Titolo</h1> <p> paragrafo </p> Come puoi vedere nell'esempio il paragrafo sarà più grande del titolo (h1) e questo perché magari con diversi div annidati non c'è un vero valore in altezza esplicito... quello che nella fattispecie capitava a me era il seguente: i titoli h1, h2, h3, h4, h5 erano più piccoli del font dentro un div io avevo ad esempio h1 che era tipo corpo 28 e il font di un div interno dinamico di corpo 12, Chrome cosa faceva? mostrava h1 piccolo e il font dentro il div annidato gigantesco, sproporzionato rispetto ad h1... mettendo la regola html * {max-height: 1000000px; } io obbligo Chrome a non toccare i font, lo zoom si può sempre fare, questo non preclude lo zoom che è sempre usabile ma azzera il problema del font boosting... a questo punto credo di averlo spiegato in tutte le salse, forse su layout tabellari non funziona oppure è ininfluente so solo che a me ha risolto il problema alla radice e ho testato il mio sito su diversi browser mobili e va benissimo... mi spiace che non funzioni a Marco ma credo sia colpa delle tabelle... Comunque gli hack nascono come soluzioni a bug temporanei infatti una volta trovato il modo di eliminare il bug si può ripristinare il foglio di stile come era prima dell'hack... https://en.wikipedia.org/wiki/Google_Chrome_for_An droid Font Boosting is used when text on the website is too small to be read properly. It uses an algorithm to increase font sizes when necessary, aiming to make the text readable regardless of the zoom level. Questo significa che Chrome, Opera e Safari interpretano a modo loro i font in rapporto agli elementi html/css valutati... https://productforums.google.com/forum/#!topic/chr ome/hxA5x2LlgBA http://stackoverflow.com/questions/11289166/chrome -on-android-resizes-font Scusate se parlo impropriamente di 'mio hack', non è mio ma l'ho adottato... quindi è mio in senso lato...