0
gmail/yahoo/Outlook과 같은 데스크톱 클라이언트에서 제대로 작동하도록 테스트 된 이메일 템플릿을 만들었으며 모바일 gmail 앱에서 올바른 응답 동작을 테스트했습니다. Android/Galaxy S4를 사용하고 있습니다.yahoo 모바일 앱으로 반응 형 이메일을 작동시키는 방법은 무엇입니까?
반응 스타일은 yahoo 모바일 앱에서 유효하지 않습니다. 사실, '스타일'에서 CSS 규칙을 읽지 않습니다. 모바일 뷰로 설정된 데스크톱 크롬은 (Inspect -> toggle device 툴바 사용) 야후 메일에 로그인하면 응답 스타일을 읽은 이메일을 보여줍니다.
질문 : yahoo 모바일 앱이 응답 성을 지원하지 않습니까? 아니면 특히 추가 해킹이 필요한가요?
업데이트 : 나는 몸 머리에서 CSS 스타일을 이동했습니다. 그런 다음 스타일을 읽습니다. 그러나 몸에 스타일을 갖는 것이 좋은 생각이 아니기 때문에 gmail 모바일 앱은 이제 그것을 무시합니다. 안드로이드에
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<style>
body {
mso-line-height-rule:exactly;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt}
table {
border-collapse: collapse;
border-spacing: 0;margin: 0 auto}
img, a img {
border:0 none;
height: auto;
line-height: 100%;
outline: none;
-ms-interpolation-mode: bicubic}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important}
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important}
.a6S {
display:none !important;
opacity:0.01 !important}
img.g-img + div {
display:none !important}
.button-link {
text-decoration: none !important}
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.ios-gm-fix {
min-width: 375px !important;}
}
</style>
<style>
#email-container {
border:1px solid #CCC;
border-radius:3px;
border-collapse:separate}
.desktop-view {color:blue}
.mobile-view {color:#444}
@media only screen and (max-width: 480px) {
#email-container-wrap {
width:100% !important;
padding:0 !important}
#email-container {
border:none;border-radius:0}
.desktop-view {color:#444}
.mobile-view {color:blue}
#email-contents {
padding:15px 22px !important;
font-size:16px!important}
}
</style>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%">
<center style="width=100%;background=#ffffff">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%">
<div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-header">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-body">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" width="100%">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px">
<span>On Desktop, there will be a border and gray background on all sides.</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px">
<span>On Mobile, the border and background will not exist.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-footer">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</center>
</body>
</html>
당신은 현대 HTML 이메일 코딩에 대한이 튜토리얼 시리즈를 체크 아웃 할 수 있습니다 http://blog.edmdesigner.com/modern-html-email-tutorial/ 체크 아웃 응답 이메일을 만들려면이 새로운 드롭 석회질 방법 템플릿. 이 접근법은 야후에서도 잘 작동하는 이메일을 코딩하는 데 도움이됩니다. http://blog.edmdesigner.com/the-drop-calc-method-to-create-responsive-html-emails/ –
@Ethan은 작업중인 코드를 게시하여 디버그하고 무엇이 문제인지 찾을 수 있습니까? 계속 하시겠습니까? –
@TedGoas 네, 작은 테스트 버전을 잘라서 여기 게시 할 것입니다. 한 번 당신에게 통지합니다. – Ethan