Как браузер выбирает изображение favicon, если нет точного соответствия размера? - PullRequest
0 голосов
/ 30 октября 2019

Насколько я понимаю, большинству настольных браузеров требуется изображение значка 16x16. Другие платформы, такие как iPhone / iPad / Android, имеют различные требования к размеру пикселя для значков своих браузеров или значков закладок, как отмечено в этой статье .

Мои вопросы:

(1) о выборе того, какой

Допустим, для обозревателя браузеру необходим значок 32x32 , ради аргумента. Когда в объявлении фавиконов в HTML нет точного совпадения, какой из них будет выбран?

<link rel='icon' sizes='16x16' href='favicon-16.png'></link>
<link rel='icon' sizes='48x48' href='favicon-48.png'></link>

Примечание 32 - это ровно 2 раза из 16 (округленное число), но 48 равно 1,5 в 16 раз (имеетдробная часть).

Документация MDN по иконкам является расплывчатой, поскольку в ней не указан приоритет выбора «наиболее подходящего»:

Если их несколькоs, браузер использует их медиа, тип и размеры, чтобы выбрать наиболее подходящий значок. Если несколько значков одинаково подходят, используется последний.

См. Эту статью MDN о типах ссылок , в таблице найдите строку "icon".

(2) о рендеринге после уменьшения размера

Допустим, единственное изображение значка, предоставляемое сервером, имеет размер 48 * 48, но браузер нуждается в значке 16x16, поэтому браузер принимает решениечтобы уменьшить этот значок 48 * 48 до 16 * 16 (это то, что делают браузеры, см. это ). Обратите внимание, что это в 3 раза меньше. Что происходит с линией, координаты которой не кратны 3?

Например, есть черная линия шириной в 1 пиксель, два конца которой имеют координаты пикселей (32, 0) и (32, 48). После уменьшения математически новые координаты пикселей должны быть (10.66 .., 0) и (10.66 .., 16).

Будет ли эта линия отображаться как (a) линия шириной в 1 пиксель из новой координаты(11, 0) - (11, 16), используя исходный черный цвет или визуализированный (b) в виде линии шириной 2 пикселя от новой координаты (10, 0) / (11,0) до (10, 16) /(11, 16) используя серый цвет?

...