Адаптивные изображения в электронной почте
Я хочу отправить изображение на мобильные устройства и другое изображение на настольные устройства в электронной почте. display: none хорошо работает для всего, кроме Outlook и Gmail. На изображении есть кнопка, но на мобильном телефоне текст в кнопке становится слишком маленьким. Есть идеи?
2 ответа
Что я в итоге сделал:
<head>
<style type="text/css">
@media only screen and (max-width: 480px){
img {content: url(http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg)}
}
</style>
<body>
<img img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg" width="500" height="500">
</body>
iPhone и Android могут справиться content, которые для меня являются единственными мобильными устройствами, о которых я должен беспокоиться. Они подают изображение, которое я хочу, а другие настольные устройства остаются с исходным изображением.
Приятно видеть, что вы нашли решение, которое работает для вас. Если вам или кому-то еще нужно display: none для почтовых клиентов в будущем: для Outlook это mso-hide: all и Gmail должен работать с display: none до тех пор, пока он находится в атрибуте встроенного стиля, или height: 0; width: 0; overflow: hidden;