Я пытаюсь создать собственную подпись электронной почты, которая будет использоваться в outlook.
Созданный мною HTML хорошо работает на клиенте Outlook для настольных ПК, но на мобильном клиенте изображения не меняются./ Масштабируемо.
Мой HTML-код выглядит следующим образом
<meta name="viewport" content="width=device-width"> <html> <head> </head> <style> </style> <body style="width:100%;max-width:630px !important; max-height:240px !important ;font-family: Verdana,Helvetica,sans-serif;"> <div style="max-width:100%;"> <table> <tbody> <tr> <td style="overflow:hidden; white-space:nowrap"> <img style="max-width: 150px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/logo_lrg.png"> </td> <td> <table style="width: 430px;table-layout: fixed;"> <tbody> <tr> <td style="overflow:hidden; white-space:nowrap"> <span style="font-size: 0.8em;" style="color: rgb(0,92,171);"><big><strong>Full Name</strong></big></span> </td> </tr> <tr> <td style="overflow:hidden; white-space:nowrap"> <span style="font-size: 0.8em;">Designation</span> </td> </tr> <tr> </tr> <tr></tr> <tr> <tr> <td style="overflow:hidden; white-space:nowrap"><span style="font-size: 0.8em;">Location</span></td> </tr> <tr> <td style="white-space: nowrap;"> <span style="font-size: 0.8em;">T:+00 00 0000 0000 | M:+00 00000 00000</span> </td> </tr> <tr> <td style="overflow:hidden; white-space:nowrap"> <div style="margin-top: 5px;padding-top: 5px;border-top-color: lightgray;border-top-style: dotted;"> <a href="http://www.example.com" target="_blank"><img style="max-width:100%; max-width: 104px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/logo_sml.png"></a> <a href="https://www.facebook.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/fb.png"></a> <a href="https://twitter.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/twitter.png"></a> <a href="https://in.linkedin.com/" target="_blank"><img style=" max-width:100%; max-width: 30px !important; min-width: 23px !important;" src="http://qsign.000webhostapp.com/QSign_test/assets/imgs/linkedIn.png"></a> </div> <td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <img style="width:100%;max-width: 630px !important;" src='http://qsign.000webhostapp.com/QSign_test/assets/imgs/campaign/kyr.png'> </div> </body> </html>
http://qsign.000webhostapp.com/QSign_test/index.html
Какя делаю изображения или всю шкалу подписи пропорционально на мобильных экранах, учитывая, что я не могу использовать медиазапросы.