2012-03-24 14 views
14

Estoy estudiando CSS3 y HTML5 y tratando de desarrollar una página de inicio simple. Como solo tengo la interfaz de Mac en mi casa, no pude verificar las diferencias en Windows.¿Alguna diferencia entre Chrome en Mac y Chrome en Windows?

Pero un día, uno de mis conocidos me dijo que hay una diferencia de píxeles entre los navegadores que no conocía en absoluto. Luego revisé mi página y parecía estar mal.

Aunque era la misma resolución que establecí, Chrome en Mac me mostró una posición adecuada de varios botones pero Chrome en Windows no.

Su posición era bastante diferente y arruinó el diseño. ¿Como puedo solucionar este problema? o es normal?

Gracias.

+15

Bienvenido al diseño web. –

+1

Gracias. ¡He oído hablar del "navegador cruzado" pero no sabía que habría un resultado diferente a pesar de que son los mismos navegadores! ¿es natural en la razón de la diferencia de Mac y Windows? – Hoon

+2

Puede verificar si las versiones del programa son diferentes. Pero sí, si quieres apuntar a diferentes plataformas, necesitarás probar en esas plataformas. Y luego está su pregunta, "¿Cómo puedo solucionar este problema?", Sin mostrarnos su sitio web. Eso va a ser difícil. –

Respuesta

6

Desarrollar un sitio que sea el mismo en cada combinación de sistema operativo y navegador no es una tarea fácil. Personalmente ha agregado muchas horas a mi tiempo de desarrollo para intentar solucionar los problemas.

Existen varias herramientas que intentan ayudarlo con esta tarea, como Cross Browser Testing. O puede probarlo manualmente instalando los navegadores en su máquina. También es común usar máquinas virtuales para probar su sitio web en otras plataformas. VMware es popular.

El uso de bibliotecas de navegador cruzadas también puede ayudar. Como jQuery, que es muy popular. Este page enumera más información sobre el tema, en general.

1

La diferencia no está en Chrome, pero la diferencia está en Mac y Windows. Aquí, se puede detectar la userAgent y añadir la adecuada class a la etiqueta body (con jQuery):

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

Después de detectar userAgent, puede escribir CSS especialmente para Mac y Windows y sus navegadores también.

Cuestiones relacionadas