أقصى عرض لمحتوى البريد الإلكتروني

حاليًا، عندما يكتب المستخدمون رسائل أو يذكرون مستخدمين آخرين، سيستلمون رسائل بريد إلكتروني.
سيظهر محتوى البريد الإلكتروني بنسبة 100% من نافذة البريد الإلكتروني.

إذن، كيف يمكن تعيين العرض الأقصى للرسائل البريدية! على سبيل المثال 650 بكسل؟

لقد جربت ذلك لكنه لم ينجح!

يمكنك تحديد عرض أقصى للرسائل الإلكترونية عن طريق إنشاء قالب بريد إلكتروني يُغلف وسم %{email_content} داخل جدول يتم ضبط max-width له باستخدام CSS. وإذا كنت ترغب في تقييد العرض للرسائل المعروضة على Outlook، فستحتاج أيضًا إلى إضافة جدول بعرض ثابت مُغلف بوسوم <!--[if mso]>.

إليك قالب بريد إلكتروني أساسي يحد من المحتوى إلى أقصى عرض قدره 600 بكسل. إذا استخدمت هذا القالب، فتأكد من استبدال رابط صورة الشعار برابط شعار موقعك. كما استبدل قيمة سمة href برابط موقعك. ويجب أن تُضبط سمة alt لصورة الشعار على نص ذي معنى لموقعك.

:warning: نظرًا لأن القالب يتضمن شعار الموقع، يجب عليك التأكد من تعطيل إعداد الموقع apply custom styles to digest. وإلا فإن ملخصات الرسائل المرسلة من موقعك ستظهر فيها شعاران في أعلى الرسالة.

<!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"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
    body, table, td, th, h1, h2, h3 {
        font-family: Helvetica, Arial, sans-serif !important;
    }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding: 10px 0 30px 0;">
            <!--[if gte mso 9]>
            <table width="600" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td><![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="max-width: 600px;border-collapse: collapse;">
                <tr>
                    <td style="padding: 20px 15px 20px 15px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center">
                                    <a href="https://forum.example.com">
                                        <img src="https://your-site-logo-url"
                                             alt="اسم موقعك" width="150" height="40"
                                             style="display: block;"/>
                                    </a>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 15px 0 15px;">
                        <hr style="background-color: #ddd; height: 1px; border: 1px;">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
                        %{email_content}
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]></td></tr></table><![endif]-->
        </td>
    </tr>
</table>

لقد اختبرت هذا باستخدام خدمة اختبار البريد الإلكتروني مع معظم عملاء البريد الإلكتروني الأكثر شيوعًا:

iPad (Retina) (iOS 13.1):

تطبيق Gmail (Android 6.0):

iPhone 6 Plus:

Outlook.com: