Correzione delle dimensioni del sito in FireFox rispetto a Chrome su schermi di grandi dimensioni

Sembra che Gecko, Trident e Webkit abbiano un modo diverso di visualizzare pagine Web su schermi ad alta risoluzione. I browser Webkit come Chrome e la nuova Opera ingrandiranno la pagina per adattarsi alla risoluzione in pixel dello schermo. Tuttavia, questo potrebbe rendere il testo piccolo molto difficile da leggere.Correzione delle dimensioni del sito in FireFox rispetto a Chrome su schermi di grandi dimensioni

Firefox e Internet Explorer, d'altra parte, sembrano avere alcune dimensioni predefinite, e se la risoluzione è più grande, faranno finta che lo schermo abbia una risoluzione più bassa, e invece utilizzino i pixel aggiuntivi per migliorare l'anti-aliasing.

Ora il problema: come faccio a ottenere la dimensione dei miei siti web in modo che corrispondano in questi diversi browser? La differenza sul mio schermo 1920x1080 è di circa il 20% (devi ingrandire i browser Webkit a circa il 120% delle dimensioni normali per far corrispondere la vista negli altri browser)

C'è qualche errore di CSS che abusa di @viewport o di un altro modo per garantire che la pagina abbia lo stesso aspetto tra i browser?

fonte

2014-04-17 Qqwy

potrebbe essere che sono solo alla ricerca per il tag viewport meta ' '? – Netsurfer

Sfortunatamente, non lo è. Questo non risolve il problema (anche se aiuta sui dispositivi mobili con altri problemi non correlati a questo) – Qqwy

L'unica 'soluzione' che ho trovato che potrebbe funzionare fino a quel momento è quella di cambiare tutti i valori dei pixel in valori relativi (es. Percentuale o em) e ridimensiona il corpo in un'altra dimensione in determinate condizioni dello schermo @media – Qqwy

Prova ad aggiungere questo meta tag all'interno del vostro <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Utilizzare un reset CSS per tentare di ottenere un comportamento coerente in tutti i browser.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

Uso dimensioni di font relative a gruppi come ‘em’ o ‘%’ è un'altra soluzione.

fonte

2014-04-22 11:20:37

Questo aiuta a rendere il sito simile su diversi dispositivi mobili, ma non aiuta a Desktop, che è la piattaforma di destinazione di questo problema. – Qqwy

@Qqwy Ho modificato la mia risposta. Per favore prova la soluzione. –

OK, quindi presume si utilizza già la finestra meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

aggiungere quanto segue al vostro CSS:

html { 
    font-size: 100%; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

Vedi anche MDN - text-size-adjust

fonte

2014-04-22 14:57:29 Netsurfer

Io attualmente non hanno un Display HiDPI da testare, tuttavia ecco cosa propongo:

Hai menzionato l'uso di unità relative, che ritengo sia una buona idea. Come altri hanno già detto, l'uso del tag meta viewport per impostare la larghezza è anche una buona idea: <meta name="viewport" content="width=device-width, initial-scale=1">.

Quello che vorrei aggiungere è la media query per diverse densità di pixel. Ad esempio, sto attualmente utilizzando questo in uno dei miei progetti:

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3), 
only screen and (-o-min-device-pixel-ratio: 13/10), 
only screen and (min-resolution: 120dpi) { 
    /* style here */ 
}

Si può anche combinare questo con query di larghezza assoluta.

Alcune referenze:

... Oppure si potrebbe usare un max-width sul body

fonte

2014-04-23 17:24:51 Daze

Correzione delle dimensioni del sito in FireFox rispetto a Chrome su schermi di grandi dimensioni

risposta

Problemi correlati