Bất kỳ sự khác biệt nào giữa Chrome trên Mac và Chrome trên Windows?

Question

Tôi đang học CSS3 và HTML5 và cố gắng phát triển một trang chủ đơn giản. Vì tôi chỉ có giao diện Mac trong nhà nên tôi không thể kiểm tra bất kỳ sự khác biệt nào về cửa sổ.

Nhưng một ngày, một trong những người quen của tôi đã nói với tôi rằng có sự khác biệt về điểm ảnh giữa các trình duyệt mà tôi hoàn toàn không biết. Sau đó, tôi đã kiểm tra trang của mình và có vẻ như nó sai.

Mặc dù nó có cùng độ phân giải như tôi đã đặt, Chrome trên Mac cho tôi biết vị trí thích hợp của một số nút nhưng Chrome trên Windows thì không.

Vị trí của chúng khá khác biệt và hủy hoại thiết kế. Làm cách nào để khắc phục sự cố này? hay nó bình thường?

Cảm ơn.

Answer 1

Phát triển một trang web giống nhau trên mọi kết hợp của hệ điều hành và trình duyệt không phải là nhiệm vụ dễ dàng. Nó đã cá nhân thêm nhiều giờ để thời gian phát triển của tôi cố gắng sửa chữa các vấn đề.

Có một số công cụ giúp bạn thực hiện tác vụ này, chẳng hạn như Cross Browser Testing. Hoặc bạn có thể tự kiểm tra nó bằng cách cài đặt các trình duyệt trên máy tính của bạn. Nó cũng phổ biến để sử dụng máy ảo để kiểm tra trang web của bạn trên các nền tảng khác. VMware là phổ biến.

Sử dụng thư viện trình duyệt chéo cũng có thể hỗ trợ việc này. Chẳng hạn như jQuery, rất phổ biến. page liệt kê thêm thông tin về chủ đề này, nói chung.

Answer 2

Sự khác biệt không có trong Chrome, nhưng sự khác biệt là trong Mac và Windows. Ở đây, bạn có thể phát hiện các userAgent và thêm phù hợp class cho thẻ body (với jQuery):

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

Sau khi phát hiện UserAgent, bạn có thể viết css đặc biệt dành cho Mac và Window và trình duyệt của họ quá.