Як обробляти масштаб браузера клієнта?

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

Однак це працює лише тоді, коли рівень масштабування браузера становить 100%. Коли я збільшую або зменшую рівень масштабу, якість зображень знижується.

Деякі клієнти фактично мають різні рівні збільшення за замовчуванням. Мені було цікаво, як ти можеш з цим впоратися і чи взагалі ми з цим?

Ура

Я думаю, що більшість інших відповідей пропустили суть: мова йде не про переважаючі налаштування користувачів, а про надання зображень найкращої якості в загальному сценарії пристрою користувача, призначаючи більше одного фізичного пікселя для кожного пікселя CSS aka " Довідковий піксель "у вашому зображенні, в результаті чого браузер збільшує зображення, роблячи його піксельним і зернистим.

Мої запропоновані рішення нижче, але спочатку наведено чотири способи цього:

• Найбільш рідкісна: користувач вирішує збільшити масштаб . Не така велика проблема, адже це їх вибір.
• Дивно дивно: браузер користувача збільшується за замовчуванням . Наприклад, багато машин Windows з високою щільністю пікселів за замовчуванням збільшуються до 125% або більше, а недавно Firefox (збентежено!) Зробив це так, що в цих випадках він повідомляє користувачам, що вони збільшуються на 100%, коли вони фактично збільшуються до 125% , залишаючи їх дряпатись головами, дивуючись, чому все раптом виглядає зернисто.
• Дуже часто: для більшості пристроїв Android (та інших пристроїв?) Коефіцієнт пікселів перевищує 1. Це означає, що кожен "піксель CSS" насправді відображається за допомогою більш ніж одного фізичного пікселя - тому зображення розміром 200 пікселів на 200 пікселів width: 200px; height: 200px;насправді має масштаб що зображення 200 пікселів на 200 пікселів вгору понад 200 х 200 пікселів, що може зробити його зернистим.
• Дуже часто: багато сучасних пристроїв Apple мають " сітківку дисплеїв ". Це по суті те саме, що пристрій Android із співвідношенням пікселів 2, але з кращим маркетингом та кількома спеціальними властивостями, які дозволяють виявити його по імені.

Будь-яке з них призведе до проблеми Джона, що галерея зображень виглядає напрочуд зернистою.

Я сподівався, що хтось зможе чудово вирішити цю проблему, але наразі ось мої вподобані варіанти, починаючи з найбільш ефективних, але найменш універсально можливих:

1. Якщо можливо, перейдіть вектор - 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, коли це вимагається, а не розтягувати та стискати зображення, які у вас є.

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

Звичайно, тоді у вашого користувача повинен бути включений JavaScript ...

Ви не можете змусити користувачів подати руку. Налаштування користувача не ваші з якими грати. Налаштування та їх обхід - це погана ідея. Можливо, є причина, чому користувач щось зробив. В будь-якому випадку ви не можете гарантувати нічого на різних пристроях.

Насправді, якщо перейти до технічної сторони, це стане ще цікавішим. Ви дійсно даруєте ключі від королівства за допомогою своєї веб-сторінки. Дивіться, що користувач завантажує веб-сторінку, і тепер користувач може робити все, що їм заманеться. Ви не маєте контролю над цим шаром, він все-таки працює на машині користувачів, і вони можуть робити все, що завгодно. Навіть stackexhange не виглядає так само на моєму комп’ютері / мобільному пристрої, як на вашому. Я змінюю деякі аспекти GUI автоматично, щоб виправити 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 cs, ви можете відображати різні зображення на основі ширини екрана користувачів, висоти екрана тощо.

Знову ж таки, хоча це, мабуть, не зміна стакесу.

Ви можете просто зробити це за допомогою HTML в голові сайту, щоб додати це

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

Це не рекомендується розробниками для кожного типу веб-сайтів, але має виконувати те, що ви просите.

Сподіваюся, це допомагає: перетворення правила CSS: масштаб на тезі тіла чи інше - не ідеально дивіться тут, будь ласка:

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