2012-03-24 10 views
14

Ich studiere CSS3 und HTML5 und versuche eine einfache Homepage zu entwickeln. Da ich nur Mac-Schnittstelle in meinem Haus habe, konnte ich keine Unterschiede auf Windows überprüfen.Gibt es einen Unterschied zwischen Chrome auf Mac und Chrome auf Windows?

Eines Tages erzählte mir einer meiner Bekannten, dass es einen Pixelunterschied zwischen Browsern gibt, den ich überhaupt nicht kannte. Dann habe ich meine Seite überprüft und es schien falsch zu sein.

Obwohl es die gleiche Auflösung wie ich festgelegt hatte, zeigte Chrome auf dem Mac mir eine entsprechende Position von mehreren Tasten, aber Chrome auf Windows nicht.

Ihre Position war ganz anders und ruinierte das Design. Wie kann ich dieses Problem beheben? oder ist es normal?

Danke.

+15

Willkommen im Webdesign. –

+1

Danke. Ich habe vom "Cross-Browser" gehört, wusste aber nicht, dass es ein anderes Ergebnis geben würde, obwohl sie die gleichen Browser sind! ist es in der grund von Mac und Windows 'Unterschied natürlich? – Hoon

+2

Sie können prüfen, ob die Programmversionen unterschiedlich sind. Aber ja, wenn Sie auf verschiedene Plattformen abzielen, müssen Sie auf diesen Plattformen testen! Und dann gibt es Ihre Frage: "Wie kann ich dieses Problem beheben", ohne uns Ihre Website zu zeigen. Das wird schwierig werden. –

Antwort

6

Die Entwicklung einer Website, die auf jeder Kombination von Betriebssystem und Browser gleich ist, ist keine einfache Aufgabe. Es hat persönlich viele Stunden zu meiner Entwicklungszeit hinzugefügt, die versucht, die Probleme zu beheben.

Es gibt verschiedene Tools, die Ihnen bei dieser Aufgabe helfen können, z. B. Cross Browser Testing. Oder Sie können es manuell testen, indem Sie die Browser auf Ihrem Computer installieren. Es ist auch üblich, virtuelle Maschinen zu verwenden, um Ihre Website auf anderen Plattformen zu testen. VMware ist beliebt.

Auch Cross-Browser-Bibliotheken können dabei helfen. Wie jQuery, die sehr beliebt ist. Diese page listet im Allgemeinen mehr Informationen zum Thema auf.

1

Der Unterschied ist nicht in Chrome, aber der Unterschied ist in Mac und Windows. Hier , können Sie die userAgent und fügen Sie den entsprechenden class zum body-Tag (mit jQuery) erkennen:

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

Nach Useragent erfasst, können Sie CSS speziell für Mac und Windows und ihre Browser schreiben.

Verwandte Themen