휴대 기기에서 뉴스 레터 헤더 이미지 변경

Question

나는 mjml 프레임 워크로 뉴스 레터를 작성했습니다. 휴대 기기에서 헤더 이미지를 변경해야하지만 어떻게해야합니까? 프레임 워크는 방탄성 뉴 레터를 수행하는 데 매우 유용하지만 다른 뷰포트에 대해 다른 이미지를 지원하지 않습니다.

이

헤더 코드 : 귀하의 지원에 대한

   <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;"> 
 
       <tr> 
 
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> 
 
       <![endif]--> 
 
    <div style="margin:0px auto;max-width:900px;background:#29c5f8;"> 
 
     <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;"> 
 
       <!--[if mso | IE]> 
 
       <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;"> 
 
       <![endif]--> 
 
       <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> 
 
       <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"> 
 
        <tbody> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center"> 
 
         <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"> 
 
          <tbody> 
 
          <tr> 
 
           <td style="width:900px;"> 
 
           <a href="http://www.link.com" target="_blank"> 
 
            <img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900"> 
 
           </a> 
 
           </td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </div> 
 
       <!--[if mso | IE]> 
 
       </td></tr></table> 
 
       <![endif]--> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!--[if mso | IE]> 
 
       </td></tr></table> 
 
       <![endif]--> 
 
    <!--[if mso | IE]> 
 

 

감사

Answer 1

내가 여기에 세 가지 옵션이 있습니다 말을

:

1. 는 두 개의 이미지가 있나요 귀하의 HTML에 표시하고 장치에 따라 올바른 것만 표시 u sed, 미디어 쿼리 사용 (특히 display 속성과 Outlook에 대한 조건부 주석에 따라 달라짐)
2. 을 span으로 묶습니다. 모바일에서는 미디어 쿼리를 사용하여이 데스크톱 이미지를 숨기고 background-url 속성을 가진 span 태그에 배경 이미지를 추가하여 숨어있는 데스크톱 이미지를 "대체"합니다.
3. 이미지 태그가 하나만 있습니다. HTML, 이미지를 가리키는이 서버에서 호스팅 및 이메일이 개방되는 장치에 따라

불행하게도, 단점은 그 모두와 함께이 있습니다 (사용자 에이전트 사용) 오른쪽 이미지를 다시 보내

를

1. 휴대 기기에 모바일 콘텐츠를 표시하는 것은 전적으로 가능하지만 내용이 복잡하고 작동하지 않을 수 있으므로 두 이미지가 모두 표시 될 수 있습니다. 또한 미디어 쿼리는 모든 곳에서 지원되지 않습니다.
2. 배경 이미지는 모든 이메일 클라이언트에서 지원되지 않으므로 모든 곳에서 작동하지 않습니다. 다시 말하지만, 미디어 쿼리는 모든 곳에서 지원되지 않습니다.
3. 스크립트를 사용해야합니다. 그러나이 패키지를 사용하면 너무 열심히해서는 안됩니다. https://www.npmjs.com/package/ua-parser

호환성 측면에서 볼 때 가장 좋은 옵션은 분명합니다. 그것은 당신을위한 선택입니까?