html의 표시 태그가 html 전자 메일 템플리트에서 작동하지 않습니다.

저는 회사의 전자 메일 템플리트를 작성하고 있습니다. 해당 모바일 또는 브라우저에서 콘텐츠를 표시하려고하는지 여부에 따라 다릅니다.html의 표시 태그가 html 전자 메일 템플리트에서 작동하지 않습니다.

표시 속성이 Gmail에서 작동하지 않는 것 같습니다. 여기에 전체 코드를 붙여 넣을 수 없습니다. 이것은 제가 사용하는 미디어 쿼리입니다.

@media only screen and (max-device-width: 380px) { 
    .mobileWidth { 
     width: 290px !important; 
    } 

    img { 
    max-width: 130px !important; 
    max-height: 130px !important; 
    } 

    .right { 
     width: 100% !important;   
     position: relative !important; 
    }  

    .test { 
     width: 290px !important; 
     text-align: center !important; 
    } 

    .showMobile { 
     display:inline !important; 
    } 

    .hideMobile { 
     display: none; 
    }   
    } 

<html> 
    <body> 
    <!-- this div block is intended to by default not show in the browser and show in the mobile --> 
    <table> 
     <tr> 
     <td> 
      <div class = "showMobile" style ="display:none;"> 
      <p> some text and image <p> 
      </div> 

      <!-- this div block is intended to be shown in the browser and not shown in the mobile --> 

      <div class="hideMobile"> 
      <p> some other text and image </p> 
      </div> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

이것은 아이폰 메일 계정에서는 정상적으로 작동하지만 아이폰 용 Gmail 응용 프로그램이나 Gmail 브라우저에서는 작동하지 않습니다. 어떤 포인터?

출처

2012-07-25 bozo user

HTML 이메일의 경우 CSS 스타일을 사용하지 않는 것이 좋습니다.

당신은 오래된 학교 테이블 기반의 레이아웃 이상 (그러나 여전히 유효) HTML 태그 등

CSS 스타일은 최소로 유지하고 인라인 스타일 표기를 사용해야합니다.

출처

2012-07-25 22:36:15

#Billy 원래 html 구조와 비슷한 것으로 질문을 편집했습니다. –

그렇지만 여전히 DIV를 사용하고 있으며 여전히 CSS가 모두 있습니다. 다음은 읽을만한 가치가있는 HTML 이메일에 대한 기사입니다. http://www.sitepoint.com/code-html-email-newsletters/ –

외부 파일이 아닌 인라인 CSS를 사용합니다. –

정확함, display:none은 Gmail에서 삭제됩니다. 이 문제를 해결하는 가장 좋은 방법은 인라인 스타일을 float:left, width:0px, height:0px, visibility:none, overflow:hidden으로 설정하는 것입니다. 미디어 쿼리에 대한 요구 사항을 충족하면 이러한 모든 스타일을 되돌릴 수 있으므로 설정할 수있는 미디어 쿼리 내에서 설정할 수 있습니다 float:none !important, overflow:visible !important, width:(actual width or 100%) !important, height:(same as width) !important

출처

2012-08-14 20:57:51 Aaron

html의 표시 태그가 html 전자 메일 템플리트에서 작동하지 않습니다.

답변

관련 문제