Исправление размера сайта в FireFox против Chrome на больших экранах

Похоже, что Gecko, Trident и Webkit по-разному отображают веб-страницы на экранах высокого разрешения. Браузеры Webkit, такие как Chrome и новая Opera, будут уменьшать страницу в соответствии с разрешением экрана в пикселях. Однако, это может сделать небольшой текст очень трудным для чтения.

Firefox и Internet Explorer, с другой стороны, имеют некоторый размер по умолчанию, и если разрешение будет больше, они будут притворяться, что экран имеет более низкое разрешение, и вместо этого используют дополнительные пиксели для усиления сглаживания.

Теперь проблема: как мне настроить размер моих сайтов в разных браузерах? Разница на моем дисплее 1920x1080 составляет около 20% (необходимо увеличить браузеры Webkit до 120% от нормального размера, чтобы соответствовать представлению в других браузерах)

Есть ли какой-то CSS-хак, злоупотребляющий @viewport или другим способом убедиться, что страница в браузерах выглядит одинаково?

Источник

3 ответа

ОК, предполагается, что вы уже используете метатег viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

добавьте следующее в ваш CSS:

html {
    font-size: 100%;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

Смотрите также MDN - text-size-Adjust

Источник

Попробуйте добавить этот метатег в свой <head> тег

<meta name="viewport" content="width=device-width, initial-scale=1">

Используйте CSS Reset, чтобы попытаться получить согласованное поведение во всех браузерах.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

Использование относительных размеров шрифта в таких единицах, как "em" или "%", является другим решением.

Источник

В настоящее время у меня нет дисплея HiDPI для тестирования, однако вот что я предлагаю:

Вы упомянули использование относительных единиц, что, я думаю, является хорошей идеей. Как уже упоминалось, использование мета-тега viewport для установки ширины также является хорошей идеей: <meta name="viewport" content="width=device-width, initial-scale=1">,

Я бы добавил медиазапросы с разной плотностью пикселей. Например, в настоящее время я использую это в одном из моих проектов:

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
    /* style here */
}

Вы также можете комбинировать это с запросами абсолютной ширины.

Некоторые ссылки:

... Или вы могли бы использовать max-width на ваше body

Источник
Другие вопросы по тегам