Подпись электронной почты не работает должным образом на мобильном телефоне - PullRequest
Новая
       5

Подпись электронной почты не работает должным образом на мобильном телефоне

0 голосов
/ 09 июня 2019

Я спроектировал подпись электронной почты для своего клиента, сначала я попробовал ее с таблицами в фотошопе, но возникли некоторые проблемы - пробелы между td's - и т. Д. И я попробовал все решения, которые предоставляет сообщество stackoverflow, но я не могу решить.

После этого я попытался сделать это с помощью некоторого базового html / css-кодирования, и оно хорошо работает с настольными и почтовыми приложениями на настольных компьютерах ...

Но в мобильных div-файлах возникают проблемы из-за размеров, которые я считаю,Мне нужен этот код "отзывчивый".

Есть ли какое-нибудь простое решение в отношении этого кода?Извините за мой плохой английский.

Спасибо! 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<style media="screen" type="text/css">
	p {
	font-family: "Open Sans Light";
	font-size: 12px;
	color: #434343;
	padding:0;
	margin:0em;
}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="width:540px; height:230px; background-color:white; display:block;">

  <div style="width:38px; height:230px; background-color:white; float:left; display:block;"><img src="https://i.postimg.cc/nzLxWQZW/leftline.jpg"></img>
  </div>
  
  <div style="width:305px; height:230px; background-color:white; float:left; display:block;">
  		<div style="width:305px; height:86px; background-color:white; float:left; color:#434343;"><p style="font-weight:bold; margin-top:24px; font-size:18px; padding:0; margin-bottom:0;">DAVID MYERS</p><p style="margin:0; padding:0;">Marketing Manager</p>
  		</div>
        <div style="width:305px; height:27px; background-color:white; float:left; display:block;"><img src="https://i.postimg.cc/WzFvNLd6/dot.jpg"></img>
  		</div>
        <div style="width:305px; height:64px; background-color:white; float:left; display:block;">
          <p style="margin:0; padding:0;">P: +972.54.563.1729</p>
          <p style="margin:0; padding:0;">M: +972.54.563.1729</p>
  		</div>
        <div style="width:305px; height:53px; background-color:#f6f6f6; float:left; display:block;">
        <p style="margin-top:12px; margin-bottom:0; margin-left:0; margin-right:0; font-size:10px; font-weight:bold;">www.stayviagem.com</p>
          <p style="padding:0; margin:0; font-size:10px;">85 Broad Street, Suite 28-088, New York, NY 10004</p>
  		</div>
  
  </div>
  
  <div style="width:197px; height:230px; background-color:white; float:left; display:block;">
  		<div style="width:197px; height:178px; background-color:white; 	float:left; display:block;"><img src="https://i.postimg.cc/6pLN5hpS/logo-viagem.jpg"></img></div>
        <div style="width:197px; height:52px; background-color:#461d7b; 	float:left; display:block;">
        
        	<a href="https://www.facebook.com/stayviagem" target="_blank"><div style="width:48px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/8PvSxGQT/facebook.jpg"></img></div></a>
        	<a href="https://www.instagram.com/stayviagem" target="_blank"><div style="width:34px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/jSrbb1tP/instagram.jpg"></img></div></a>
        	<a href="https://www.twitter.com/stayviagem" target="_blank"><div style="width:32px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/9XK2xMkx/twitter.jpg"></img></div></a>
        	<a href="https://www.pinterest.com/stayviagem/" target="_blank"><div style="width:34px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/26XYN8SS/pinterest.jpg"></img></div></a>
        	<a href="https://www.youtube.com/channel/UCWJBkDUX-YwAggoM9zHVmWQ" target="_blank"><div style="width:48px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/gjCPrSR9/youtube.jpg"></img></div></a>
        
        </div>
  </div>
</div>
</body>
</html>

1 Ответ

1 голос
/ 09 июня 2019

Электронная почта слишком проста для реализации сложного кода HTML и CSS. Ты будешь пытаться годами.

К сожалению, даже если кажется, что он работает на нескольких устройствах, существует так много почтовых клиентов, доменов и устройств, что будет комбинация, которая не поддерживает HTML - или, как вы уже видели, устройство, которое плохо реагирует на HTML.

По моему личному мнению, я бы старался не использовать HTML для реализации подписи, потому что это будет очень сложно сделать. Электронная почта никогда не была предназначена для представления HTML, но она легко может работать с форматированием и изображениями. Что приводит меня к моему решению ...

Если вы пытаетесь отобразить бизнес-детали для получателя, почему вы не можете создать действительно красивое изображение в Photoshop и прикрепить его к нижней части каждого электронного письма? Почти все компании используют этот метод отображения красивой подписи электронной почты, потому что не так много других способов сделать это иначе. Даже если вы хотите сделать его отзывчивым, он должен адаптироваться к различным размерам экрана, способностям представлять HTML и CSS, а также к различным онлайн и настольным клиентам. Я думаю, что вы, возможно, пытаетесь достичь чего-то немного сложного.

...