Любая разница между Chrome на Mac и Chrome в Windows?

Я изучаю CSS3 и HTML5 и пытаюсь создать простую домашнюю страницу. Поскольку у меня есть только интерфейс Mac в моем доме, поэтому я не мог проверить какие-либо различия в окнах.

Но однажды один из моих знакомых сказал мне, что между браузерами есть разница в пикселях, которые я вообще не знал. Затем я проверил свою страницу, и это оказалось неправильным.

Несмотря на то, что было такое же разрешение, как я установил, Chrome на Mac показал мне подходящую позицию нескольких кнопок, но Chrome на Windows этого не сделал.

Их позиция была совсем другой и разрушила дизайн. Как я могу исправить эту проблему? или это нормально?

Спасибо.

Ответ 1

Разработка сайта, который является одним и тем же при каждой комбинации операционной системы и браузера, - непростая задача. Он лично добавил много часов в мое время разработки, пытаясь исправить проблемы.

Есть несколько инструментов, которые помогут вам справиться с этой задачей, например Cross Browser Testing. Или вы можете вручную протестировать его, установив браузеры на вашем компьютере. Также распространено использование виртуальных машин для тестирования вашего сайта на других платформах. VMware является популярным.

Использование кросс-браузерных библиотек также может помочь в этом. Например, jQuery, который очень популярен. Эта страница содержит дополнительную информацию по этому вопросу в целом.

Ответ 2

Отличие не в Chrome, но разница в Mac и Windows. Здесь вы можете обнаружить userAgent и добавить соответствующий тег class в тег body (с помощью jQuery):

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

После обнаружения userAgent вы можете написать css специально для Mac и Window и их браузеров.