반응 형 HTML 전자 메일 - 클래스 추가 Gmail

반응이 매우 빠른 HTML 전자 메일 템플릿을 테스트하고 있으며 Gmail (Android)이 미디어 쿼리를 무시하고 있습니다.반응 형 HTML 전자 메일 - 클래스 추가 Gmail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> 
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> 
    <style type="text/css">@media screen and (max-width:580px) { 
    *[class="mob-column"] {float: none!important; width: 100%!important;} 
    *[class="hide"] {display:none!important;} 
    *[class="100p"] {width:100%!important; height:auto!important;} 
    }</style> 
    <title>Website</title> 
</head> 

<body> 
    <table class="100p" width="100%" cellpadding="10" cellspacing="0" bgcolor='#ffffff'> 
    <tr> 
     <td valign="top" align="center"> 
     <table class="100p" width="650" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
      <tr> 
      <td class="mob-column" width="325" align="left" valign="middle"> 
       <img src="https://www.website.com/img/logo.png" alt="website" width="200" height="26" border="0"/></td> 
      <td class="hide" width="325" valign="middle" align="right"> 
       <span style="font-size:12px;color:#c5c5c5;font-family:Helvetica,Arial,sans-serif;">Having trouble viewing this email? <a style="color:#666666; text-decoration:none;" href="#">click here</a></span> 
      </td> 
      </tr> 
      <tr> 
      <td class="mob-column" align="left" valign="middle" colspan="2" height="30" style="padding-left: 15px;"> 
       <span style="font-size:12px; font-family:Helvetica,Arial,sans-serif;"><a style="color:#c5c5c5; text-decoration:none;" href="tel:111111111">111111111</a><span style="color: #c5c5c5;">&nbsp;|&nbsp;</span><a style="color:#c5c5c5; text-decoration:none;" href="tel:111111111">111111111</a></span> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

그래서 클래스 mob-column이 테이블 셀 스택해야하고, hide 테이블 셀을 숨겨야합니다 :

여기 내 아주 기본적인 테스트 마크 업입니다. 아직이 기능은 Android 용 Gmail에서 완전히 무시되고 있습니다.

내가 바탕 화면에 Gmail의 HTML을 검사 할 때 나는 클래스과 같이 변경된 것을 확인할 수 있습니다

mob-column이 m_1371211720454434058mob-column hide로 변경됩니다 m_1371211720454434058hide

로 변경 내가 튜토리얼이 따랐습니다 Litmus (https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch)에서 시험을 위해 https://putsmail.com을 사용하고 있습니다.

어디서이 문제가 발생합니까?

출처

2017-11-17 MP_Webby

지금까지 내가 아는 한, Gmail의 안드로이드 응용 프로그램은 미디어 쿼리를 지원하지 않습니다 https://litmus.com/help/email-clients/media-query-support/

내가보기 엔 당신이 인라인 CSS 코드를 사용하는 것이 좋습니다

, 어쩌면 당신이 메일 침프 https://templates.mailchimp.com/resources/inline-css/로 CSS의 inliner를 사용하여 시도해야

출처

2017-11-17 11:45:56 majali

약 1 년 전에 Gmail이 포함 된 스타일 시트 및 미디어 쿼리에 대한 지원을 추가하기 위해 업데이트되었습니다. 이제는 모두 좋았습니다. – Gwesolo

내가 좋겠 이

.mob-column {width: 100% !important; display: block !important}

처럼 뭔가에 폭도 열 클래스를 변경하는 것이 좋습니다 우리는 더 이상 속성 선택기를 사용하지 않으며, Gmail 및 야후 지원 표준 클래스 모두 & 전 요즘에는 셀렉터가 있습니다.

출처

2017-11-17 12:29:32 Gwesolo

나는 디스플레이 블록이 깨지지 않을 것이라는 의구심을 잃어 버렸다고 생각합니다. – Syfer

반응 형 HTML 전자 메일 - 클래스 추가 Gmail

답변

관련 문제