Адаптивная подпись электронной почты ⇐ Html

[Anonymous]

Я создаю собственную подпись электронной почты в формате HTML. В клиентах для настольных ПК (включая Outlook, Gmail и Apple Mail) все выглядит идеально. Однако, когда я просматриваю подпись на мобильных устройствах, вся подпись просто уменьшается, вместо того, чтобы правильно располагаться или корректировать макет.
Проблема:
Размер шрифта приветствия вверху меняется и становится очень маленьким.
Макет не адаптируется и не размещается вертикально, как ожидалось, на небольших экранах.
Так выглядит. как будто вся подпись рассматривается как фиксированный блок, который просто сжимается до размера экрана.
Что я хочу:

• На мобильных устройствах подпись должна переформатироваться — то есть элементы (такие как имя, должность, контактная информация и т. д.) при необходимости должны располагаться друг под другом.
• Шрифт размеры должны оставаться разборчивыми и не уменьшаться неестественно.

Что я пробовал:

• Использование элементов с отображением: flex и медиа-запросы для управления
  макетом.
• Установка минимальной, максимальной ширины и ширины на контейнерах и изображениях.
  Попробовал значения в пикселях и % для определения размера макета.
• Прогнал код с помощью нескольких инструментов искусственного интеллекта и проверки, и все сказали, что он
  выглядит нормально, но на мобильных устройствах он явно не работает.

Примечания:
Я знаю, что почтовые клиенты имеют ограниченную поддержку CSS, особенно на мобильный.
Я прилагаю скриншот того, как он выглядит на мобильных устройствах (если Stack Overflow разрешает вложения — в противном случае я могу дать ссылку на него).
Вопрос:
Как создать адаптивную подпись электронной почты, которая будет корректно работать как на настольном компьютере, так и на мобильном устройстве, особенно с сохранением макета и размеров шрифта?
Будем очень признательны за любые советы по обеспечению оперативности подписи электронной почты.


Вот мой код:

Код: Выделить всё

Email Signature





a {
color: #dfa42e;
}

a:hover {
text-decoration: underline !important;
}

a[href^="tel:"] {
color: #000000 !important;
}

a[href^="tel:"]:hover {
text-decoration: underline !important;
}

.booking-button:hover {
background-color: #f0b84a !important;
text-decoration: none !important;
}






Viele Grüße

Louis Bley






[b]Louis Bley[/b]


[url=https://www.yis-media.com/]
[img]https://hosting.yis-media.com/signatures/yismedia/yismedia-logo.svg[/img]
[/url]










Geschäftsführer

YIS Media UG (haftungsbeschränkt)





Email:

[url=mailto:kontakt@yis-media.com]kontakt@yis-media.com[/url]


Telefon:

[url=tel:+491796899112]+49 179 68 99 11 2[/url]


Website:

[url=https://www.yis-media.com/]www.yis-media.com[/url]












[url=https://tidycal.com/yismedia/30min]Termin buchen[/url]






[url=https://www.yis-media.com/]
[img]https://hosting.yis-media.com/signatures/yismedia/yis-media-banner.webp[/img]
[/url]







Rechtliches - YIS Media UG (haftungsbeschränkt)




Geschäftsführer: Louis Bley
Gerichtsstand: Köln
HR-Nummer 109878

Steuer Nr.  204/5724/1560
Umsatzsteuer ID-Nummer: DE352490777
Anschrift: Niedenhofsbusch 3, 51427 Bergisch Gladbach





Die Durchführung jeglicher Dienstleistung erfolgt auf Grundlage unserer [url=https://yis-media.com/agb/]AGB[/url].

Der Inhalt dieser Email ist vertraulich. Sollte Ihnen diese Email irrtümlich zugesandt worden sein, bitten wir Sie, uns unverzüglich zu benachrichtigen und die Email zu löschen. Da Emails leicht unter fremdem Namen erstellt oder manipuliert werden können, müssen wir zu Ihrem und unserem Schutz die rechtliche Verbindlichkeit der vorstehenden Erklärung ausschließen. Die für die YIS Media UG (haftungsbeschränkt) geltenden Regeln über die Verbindlichkeit von rechtsgeschäftlichen Erklärungen mit verpflichtendem Inhalt bleiben unberührt.



Bitte denken Sie vor dem ausdrucken dieser Mail an die Umwelt

Подробнее здесь: https://stackoverflow.com/questions/797 ... -signature