2012-03-24 19 views
14

Sto studiando CSS3 e HTML5 e sto provando a sviluppare una semplice homepage. Dal momento che ho solo un'interfaccia Mac a casa mia, quindi non ho potuto controllare le differenze su Windows.Qualche differenza tra Chrome su Mac e Chrome su Windows?

Ma un giorno, uno dei miei conoscenti mi ha detto che c'è una differenza di pixel tra i browser che non conoscevo affatto. Poi ho controllato la mia pagina e sembrava sbagliata.

Anche se era la stessa risoluzione impostata, Chrome su Mac mi ha mostrato una posizione appropriata di diversi pulsanti, ma Chrome su Windows no.

La loro posizione era molto diversa e ha rovinato il design. Come posso risolvere questo problema? o è normale?

Grazie.

+15

Benvenuti nel web design. –

+1

Grazie. Ho sentito parlare del "browser cross" ma non sapevo che ci sarebbe stato un risultato diverso anche se erano gli stessi browser! è naturale per la differenza di Mac e Windows? – Hoon

+2

È possibile verificare se le versioni del programma sono diverse. Ma sì, se vuoi scegliere come target diverse piattaforme, dovrai testare su quelle piattaforme! E poi c'è la tua domanda, "Come posso risolvere questo problema", senza mostrarci il tuo sito web. Sarà difficile. –

risposta

6

Sviluppare un sito uguale per tutte le combinazioni di sistema operativo e browser non è un compito facile. Ha aggiunto personalmente molte ore al mio tempo di sviluppo cercando di risolvere i problemi.

Esistono diversi strumenti che tentano di aiutare con questa attività, ad esempio Cross Browser Testing. Oppure puoi testarlo manualmente installando i browser sul tuo computer. È anche comune utilizzare le macchine virtuali per testare il tuo sito Web su altre piattaforme. VMware è popolare.

L'utilizzo di librerie cross browser può anche aiutare in questo. Ad esempio jQuery, che è molto popolare. Questo page elenca più informazioni sull'argomento, in generale.

1

La differenza non è in Chrome, ma la differenza è in Mac e Windows. Qui, è possibile rilevare il userAgent e aggiungere l'appropriato class al tag body (con jQuery):

jQuery(document).ready(function(){ 
if(navigator.userAgent.indexOf('Mac') > 0){ 
    jQuery('body').addClass('mac-os'); 
} else { 
    jQuery("body").addClass("pc"); 
} 
}); 

Dopo aver rilevato userAgent, è possibile scrivere i CSS appositamente per Mac e Window e loro browser troppo.

Problemi correlati