Проблема масштабування зображень у Outlook
HTML верстка електронних листів – це досить складний і не завжди приємний процес. Це головним чином пов’язано з тим, що багато поштових клієнтів не підтримують сучасні веб-стандарти. Крім того, існує величезна кількість різних поштових клієнтів та сервісів.
Коли я верстав HTML листи для електронної пошти, я зіткнувся з тим, що в настільному Outlook (виявляється, ним хтось ще користується) картинки відображалися в дивному масштабі. Всі картинки були збільшені. Я вирішив цю проблему наступним чином. Я додав спеціальний код Outlook до розділу head і додав деякі атрибути до тегу html. Після додавання коду зображення в настільному Outlook почали відображатися нормально.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> </head>
Outlook (особливо версії для настільних ПК, як-от Outlook 2016, 2019 і Office 365) масштабує зображення завдяки налаштуванням DPI (точок на дюйм). Багато версій Outlook використовують Word як механізм візуалізації, який обробляє зображення інакше, ніж браузери. Якщо ваше зображення виглядає розмитим або зміненого розміру, це, ймовірно, пов’язано з автоматичним масштабуванням DPI Outlook (125% або 150% на дисплеях із високою роздільною здатністю).
Microsoft Outlook — це широко використовуваний поштовий клієнт і програма для керування особистою інформацією, розроблена Microsoft. Він є частиною пакету Microsoft 365 і доступний як для настільних комп’ютерів, так і для веб-платформ.
Схожі записи:
-
Як центрувати елемент по вертикалі за допомогою CSS (вертикальне вирівнювання)
Існує декілька способів вертикального вирівнювання. У різних ситуаціях підходять різні способи. Розглянемо деякі з них. 1. Використання Flexbox Найпростіший і поширений...
-
Нескінченне обертання за допомогою CSS анімації
CSS-анімація дозволяє створювати широкий спектр візуально привабливих ефектів без використання JavaScript. Завдяки сучасним функціям CSS розробники можуть реалізовувати п...
-
Як створити випадаюче меню, використовуючи лише HTML та CSS
В одній з попередніх статей ми розглядали створення випадаючого меню за допомогою JavaScript (jQuery). У цій статті ми розглянемо, як створити випадаюче меню, використову...
Залишити відповідь