Как вы справляетесь с масштабированием браузера клиента?

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

Однако это работает только тогда, когда уровень масштабирования браузера составляет 100%. При увеличении или уменьшении уровня масштабирования качество изображений снижается.

Некоторые клиенты по умолчанию имеют разные уровни масштабирования. Мне было интересно, как вы можете справиться с этим, и мы справимся с этим вообще?

ура

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

Мои предлагаемые решения ниже, но сначала вот четыре способа, которыми это может произойти:

• Наиболее редко: пользователь выбирает увеличение . Не такая большая проблема, так как это их выбор.
• Удивительно часто: браузер пользователя по умолчанию увеличен . Например, многие Windows-машины с высокой плотностью пикселей по умолчанию увеличены до 125% или более, и Firefox недавно (смущает!) Сделал это так, что в этих случаях он сообщает пользователям, что они увеличены до 100%, когда они фактически увеличены до 125%. оставляя их почесывать головы, удивляясь, почему все вдруг выглядит зернистым.
• Очень часто: большинство Android-устройств (и других устройств?) Имеют соотношение пикселей больше 1. Это означает, что каждый «CSS-пиксель» на самом деле отображается с использованием более одного физического пикселя - поэтому изображение размером 200 на 200 пикселей width: 200px; height: 200px;будет масштабироваться изображение размером 200 на 200 пикселей и размером более 200 на 200 пикселей, что потенциально делает его зернистым.
• Очень часто: многие современные устройства Apple имеют « дисплеи сетчатки ». По сути, это то же самое, что и устройство Android с соотношением пикселей 2, но с улучшенным маркетингом и несколькими пользовательскими свойствами, которые позволяют определять его по имени.

Любое из них приведет к проблеме Джона с галереей изображений, выглядящих удивительно зернистыми.

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

1. Если возможно, используйте vector - SVG (или Raphael.js, если вам все еще требуется поддержка IE8). Реально, это только опция для иконок, диаграмм и т. Д., И это никогда не вариант для фотографий. Очень сложные SVG также могут быть неуклюжими на мобильных устройствах низкого уровня из-за требуемой обработки.
2. Если возможно, определите соотношение пикселей устройства и предоставьте изображения на его основе. Это также может решить проблему Firefox на Windows, потому что Firefox на Windows изменяет свое считывание соотношений пикселей при увеличении и уменьшении масштаба. Недостатком является то, что это становится сложной проблемой кодирования, связанной с разработкой на стороне сервера и клиента.

3. Если 1. и 2. невозможны, но это действительно важно, и качество изображения важнее, чем, скажем, время загрузки, просто удвойте изображение.

   • Это то, что Google делает со своим логотипом на своей домашней странице: они помещают изображение PNG размером 538 x 190 пикселей в контейнер размером 269 x 95 пикселей. Это также более или менее похоже на то, как работают адаптивные изображения.

   • Раньше это считалось плохой практикой, потому что старые версии IE были ужасны при уменьшении размеров изображений, но сейчас они используются очень редко и гораздо реже, чем экраны с высокой плотностью пикселей. Это все еще несколько нежелательно, так как это увеличит размер изображения и, следовательно, увеличит время загрузки - это компромисс, который вы должны судить в каждом конкретном случае.

   • Размер удвоения является обычным явлением, поскольку очень немногие устройства имеют коэффициент больше 2, очень мало пользователей увеличивают масштаб более чем на 200%, а масштабирование изображений на 50% чище, чем другие значения.
4. Если 1, 2 невозможны, а время загрузки является слишком высоким приоритетом для 3, я не знаю других вариантов, и я рекомендую не беспокоиться об этом, потому что половина сайтов в Интернете имеют ту же проблему , и люди с этой проблемой на вашем сайте также будут иметь эту проблему на других сайтах. Черт, Firefox на Windows даже пикселирует свои собственные кнопки пользовательского интерфейса ...

Как прокомментировал DA01, вы не должны ничего с этим делать.

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

Вы можете учитывать разные браузеры и версии, а что нет, но разумно говоря, вы не должны учитывать увеличение пользователя.

Конечно, вы можете составлять 125% или 150% (а вам может и не понадобиться). Но 200%, 300%, больше? Это просто не имеет никакого смысла.

Что если пользователь использует высококонтрастную тему Windows? Что делать, если они постоянно используют лупу? Какая разница?

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

Это, конечно, только мое мнение, но компания, в которой я работаю, также явно говорит клиентам, что мы не поддерживаем их предпочтения масштабирования.

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

Возможно, вы захотите создать адаптивный сайт, который будет настраиваться в соответствии с res / device пользователя, и тогда вы, вероятно, ищете код, который будет переключать изображения на файлы с более высоким или более низким разрешением по запросу, а не растягивать и сжимать имеющиеся у вас изображения.

Когда я в последний раз пытался это сделать, я использовал media-query.js и picturefill.js. Смотрите: http://responsivedesign.is/resources/images/picture-fill . У меня был макет из 3 столбцов, в котором некоторые изображения занимали два столбца ... Когда окно браузера становилось достаточно маленьким, большие изображения переключались на версию с меньшим разрешением, шириной всего в один столбец. Браузер пользователя просто загрузит нужную ему версию файла. (и в моем случае плагин кладки переместил бы все, чтобы приспособиться).

Конечно, тогда ваш пользователь должен иметь включенный JavaScript ...

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

На самом деле, если вы перейдете на техническую сторону, это станет еще интереснее. Вы действительно даете ключи от королевства со своей веб-страницей. Посмотрите, как пользователь загружает веб-страницу, и теперь пользователь может делать с ней все что угодно. Вы не можете контролировать этот слой, ведь он работает на компьютере пользователя, и они могут делать все, что пожелают. Даже stackexhange на моем компьютере / мобильном устройстве не выглядит так же, как на вашем. Я автоматически изменяю некоторые аспекты графического интерфейса, чтобы исправить 2 ошибки рендеринга и добавил 2 ярлыка.

Раздражающее поведение масштабирования изображений на экранах HiDPI, которое приводит к размытым фотографиям (так называемый кошмар фотографов), также беспокоило меня в течение достаточно долгого времени. Мне также было интересно, что нет простого атрибута CSS, чтобы отключить его для изображений.

Мое текущее решение с использованием CSS выглядит следующим образом:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Следующим шагом будет использование классов для определения и установки различных размеров изображения, если это необходимо. Я не знаю способ динамического получения размеров изображения. Функция CSS attr (), кажется, не работает для этого.

Так что это был бы скорее вопрос программирования. Но используя JQuery, или даже просто плоскость CSS, вы можете отображать различные изображения в зависимости от ширины экрана пользователя, высоты экрана и так далее.

Опять же, хотя это, вероятно, не стек обмена, чтобы спросить.

Вы можете просто сделать это с помощью HTML в заголовке сайта добавить это

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

Надеюсь, это поможет: css rule transform: масштабирование по тегу body или другое - не идеально, смотрите здесь, пожалуйста:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741