Остановить масштабирование Firefox DPI (при установке Windows на 125%)

В настоящее время я делаю веб-страницу, и ее тестирование в chrome отлично работает, но в Firefox - оно увеличено.

Это связано с тем, что мой DPI в Windows установлен на 125%, и Firefox обнаруживает это и соответствующим образом настраивает каждую веб-страницу.

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

Теперь это не влияет на большинство людей - поскольку их DPI будет на 100% в Windows. Тем не менее, я хочу, чтобы он был одинаковым во всех браузерах.

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

например. в одном сообщении говорится:

1) Введите about:config в адресной строке
2) поиск layout.css.devPixelsPerPx
3) измените значение layout.css.devPixelsPerPx от -1.0 до 1.0

Но это не то, что я ищу. Есть ли способ отключить это из CSS/HTML/что-нибудь?

Спасибо.

Ответ 1

Это тоже разочаровало меня, но, к счастью, есть решение.

Перейдите к about:config. (Щелкните мышью на любых предупреждениях, говорящих о том, чтобы быть осторожными с расширенными функциями)

Найдите layout.css.devPixelsPerPx и измените его значение на 1.0, и ваша проблема должна быть исправлена.

Это было реализовано в Firefox 22.

Ответ 2

Вы можете легко позволить своим веб-сайтам адресовать пользователям настройки с более высоким уровнем масштабирования, включая медиа-запрос, например:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
}

См. эту статью для расширенного объяснения и почему очищенное решение медиа-запроса достаточно для широкой поддержки браузера: IE9 +, Fx3.5 +, Opera9.5+, Webkit Browsers Chrome и Safari, как Desktop, так и Mobile.

Ответ 3

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

    @media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
    body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}

Комментарий /*body....*/ Пример шкалы может быть легче понять еще хуже, т.е. потому как масштабирование должно выполняться на основе правого правого края css transform-origin. Тогда все может быть улучшено, особенно в Chrome.

если вы используете width: 125%, ваш RWD css должен по-разному реагировать на изменение размеров браузера, исходя из того, что вы ожидали, когда коэффициент экрана составлял 100%. И вы можете разумно принять это - это RWD, а разница составляет 25%. Но некоторые люди могут захотеть адаптировать свои css следующим образом:

@media screen and (min-width: 1000px)

вам также необходимо настроить:

@media screen and (min-width: 800px)

вероятно, не 1250px, а 800px, как я.

Edge, Chrome, FF делают очень хорошо. IE 11 оказал худшее, но не безнадежно.

В FF (не edge, chrome) есть некоторые проблемы при расширении полей выбора - выбор решения css. Некоторые границы могут быть видны некоторые исчезающие на FF (возможно, не край, хром)

Там могут быть некоторые проблемы, не упомянутые здесь, например, когда вы используете карусель, как owlcarousel на своей странице.

Тем не менее, я думаю, что большая вероятность сэкономить больше времени, так как этот пример еще слишком мало тестировался.

Вам нужно использовать точное масштабирование, например 0,8 для экрана 125%, чтобы ваши изображения отображались как можно резче.

Я заметил, что при переключении на разные разрешения dpi с использованием ctrl +/i в браузере для настольных компьютеров и, конечно же, с использованием жестов мультитач в мобильных браузерах, браузер также меняет dpi, поэтому любое решение, использующее @media min/max-resolution, может не работайте, как ожидалось. Что нужно в css - это прочитать разрешение системы, а не браузер. Однако, как я вижу, это изменение разрешения не происходит, как тогда, когда кто-то меняет размер браузера вручную или поворачивает мобильное устройство.

Спасибо Тацуюки Иши за исправление некоторых ошибок моего ответа.

Ответ 4

Установите значение 1,25: это увеличивает пользовательский интерфейс, но сбрасывает веб-сайт на 100% -ное отображение пикселей.