-1
私はSendGridエディタを使用してデザインされたメールを作成していますが、モバイルビューポートでメールを正しくレンダリングする方法がわかりません。現在、デスクトップ上で正常に表示されます。多くのインラインスタイルを持つスタイリング基盤としてhttp://tedgoas.github.io/Cerberus/を使用しています。モバイルクライアントのビューポートに合わせてデスクトップメールのサイズを変更するにはCSSを調整してください
現在：フルデスクトップの電子メールは、モバイルで完全にレンダリングされ、切り詰められます。
ゴール： iOS Mail.appやGmailアプリなどのクライアント上でデザインされたデスクトップメールをビューポート内に完全に収めるには
いずれのポインタも大歓迎です。
<!DOCTYPE html>
<html lang="en" style="height:100%; width:100%;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<!-- utf-8 works for most cases -->
<meta http-equiv="X-UA-Compatible"; content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
</head>
<body bgcolor="#fff" height="100%" style="margin: 0; mso-line-height-rule: exactly;" width="100%">
</body>
</html>
<div><br />
<title>Personalized Note</title>
<style type="text/css">/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding/margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
.ExternalClass {
width: 100%;
}
</style>
<style type="text/css">/* Media Queries */
@media screen and (max-width: 600px) and @media only screen and (-webkit-min-device-pixel-ratio: 2) {
.email-container {
width: 100% !important;
margin: auto !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<center style="width: 100%; background: #fff;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">A message from %spouse1_firstname & %spouse2_firstname%</div>
<!-- Visually Hidden Preheader Text : END --><!-- Email Header : BEGIN --><!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="email-container" height="100%" role="presentation" style="margin: auto;max-width:100% !important;" width="650">
<tbody>
</tbody>
<!-- 1 Column Text : BEGIN --><!-- Background Image with Text : END --><!-- 1 Column : BEGIN -->
<tbody>
<tr>
<td align="center" bgcolor="#000000" style="padding-top:60px;max-width:100%;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" height="100%" role="presentation" width="100%">
<tbody>
<tr><!-- Column : BEGIN -->
<td background="https://s3-us-west-2.amazonaws.com/vr-ac-demo/bg-Wide.jpg" class="stack-column-center" style="padding-bottom:64px;background-size:100% 100%;max-width:100%;">
<table border="0" cellpadding="0" cellspacing="0" height="300" role="presentation" style="padding-top: 20%;" width="530">
<tbody>
<tr>
<td style="text-align: center; height: 100% !important; background: #000000; font-family: sans-serif; font-size: 15px; line-height: 20px; color: rgb(85, 85, 85); width: 100% !important;border:1px solid white;"><span contenteditable="false" tabindex="-1"><span class="sg-image" data-imagelibrary="%7B%22width%22%3A140%2C%22height%22%3A140%2C%22alignment%22%3A%22center%22%2C%22border%22%3A1%2C%22src%22%3A%22https%3A//s3-us-west-2.amazonaws.com/vr-ac-demo/square+crop+image.jpg%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D" data-widget="sgimage" style="float: none; display: block; text-align: center;"><img height="140" src="https://s3-us-west-2.amazonaws.com/vr-ac-demo/square+crop+image.jpg" style="height: 140px; width: 140px; border: 1px solid transparent; margin-top: 20px; border-radius: 80px;" width="140" /></span></span>
<p style="font-size:23px;font-family:arial;color:#fff;margin-top:153.9;padding-bottom:6px;">HANNAH & MASON</p>
<table align="center" border="0" cellspacing="0" height="400" width="470">
<tbody>
<tr>
<td style="border:1px solid #ff69b4;">
<p style="font-size:14px;color:#ccc;text-align:left;padding: 0 4px 20px 4px;margin-left:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a orci id magna pharetra tristique et ac risus. Aenean ultricies convallis lorem. Integer vitae dignissim nisi. Nam ligula ipsum, accumsan vel mi a, ultrices tempus dolor. Curabitur mauris tortor, lacinia quis maximus nec, finibus eget velit. Nulla egestas ultricies risus. Curabitur velit nisl, semper at varius et, rutrum in ex. Ut condimentum aliquet malesuada. Curabitur rutrum interdum neque a luctus. Pellentesque sed convallis est, sed vehicula mi. Sed placerat tincidunt enim, et fringilla orci semper nec. Fusce vitae felis pharetra, consequat tellus vel, consectetur massa. Nullam convallis ex risus, at consequat justo vestibulum et. Mauris ultrices feugiat nisi, eu ornare dolor volutpat quis. Cras tincidunt lobortis justo sed accumsan.</p>
</td>
</tr>
</tbody>
</table>
<p style="font-size:12px;text-align:center;margin-top:20px;color:#ccc !important;width:86%;max-width:100%;margin-left:38px;text-decoration: none !important;padding-bottom:10px;line-height:1.4;">Download our App Store or Google Play and enter:<br />
your email: [email protected]mac.com and code: (code)<br />
or visit us at company.com</p>
</td>
</tr>
</tbody>
</table>
</td>
<!-- Column : END -->
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Column : END --><!-- Column : BEGIN --><!-- Email Body : END --><!-- Email Footer : BEGIN -->
</tbody>
</table>
<!-- Email Footer : END --></center>
</div>
、あなたはそれがモバイルに合わせてサイズを変更したいですか？それとも、まったく異なったレイアウトにしたいのですか？あなたの要求に対する可能な解決策は多くあり、この質問を（現在の改訂版では）広すぎるものにしています。 – TylerH
私は、私が説明しようとしている問題について同僚と協力し、大きな進歩を遂げました。問題は現在、メモとしては広すぎる/不明瞭であり、分かりやすくするために更新されます。今すぐiOS Mail.appに合うようにデザインされた電子メールコンテンツ（背景イメージ、テーブル構造、コピー）を手に入れようとしています。 –