मैं HTML ईमेल विकसित करने के लिए काफी नया हूं और मुझे मीडिया प्रश्नों में समस्या है।

यही हो रहा है: जब मैं अपना ईमेल विकसित करना समाप्त करता हूं और यह जांचने के लिए स्क्रीन का आकार बदलता है कि यह उत्तरदायी है, तो यह योजना के अनुसार काम करता है और किसी भी स्क्रीन आकार के अनुकूल होता है। हालांकि, यह देखने के लिए कि ईमेल वास्तव में उत्तरदायी है या नहीं, परीक्षण ईमेल भेजने के लिए MailChimp का उपयोग करने के बाद, मैं देखता हूं कि मोबाइल ऐप्स (जैसे आउटलुक और जीमेल) वास्तव में ईमेल आकार को स्क्रीन आकार में अनुकूलित नहीं करते हैं।

वे वास्तव में फ़ॉन्ट और छवियों को छोटा बनाते हैं ताकि पूरी सामग्री फिट हो जाए जैसे कि यह एक लैपटॉप हो

क्या किसी को पता है कि ऐसा क्यों हो रहा है और मैं इसे कैसे रोक सकता हूं?

यहाँ मेरा head टैग है:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PROMONOTICIAS</title>

  <style type="text/css">
     /* Client-specific Styles */
     #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

     body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
     .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */

     .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */

     #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

     img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

     a img {border:none;}

     .image_fix {display:block;}

     p {margin: 0px 0px !important;}

     table td {border-collapse: collapse;}

     table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

     /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
     /*STYLES*/
     table[class=full] { width: 100%; clear: both; }

     /*################################################*/
     /*IPAD STYLES*/
     /*################################################*/

     @media only screen and (max-width: 640px) {
     a[href^="tel"], a[href^="sms"] {
     text-decoration: none;
     color: #ffffff; /* or whatever your want */
     pointer-events: none;
     cursor: default;
     }
     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
     text-decoration: default;
     color: #ffffff !important;
     pointer-events: auto;
     cursor: default;
     }
     table[class=devicewidth] {width: 440px!important;text-align:center!important;}
     table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
     table[class="sthide"]{display: none!important;}
     img[class="bigimage"]{width: 420px!important;height:219px!important;}
     img[class="col2img"]{width: 420px!important;height:258px!important;}
     img[class="image-banner"]{width: 440px!important;height:106px!important;}
     td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
     td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
     img[class="logo"]{padding:0!important;margin: 0 auto !important;}

     }
     /*##############################################*/
     /*IPHONE STYLES*/
     /*##############################################*/
     @media only screen and (max-width: 480px) {
     a[href^="tel"], a[href^="sms"] {
     text-decoration: none;
     color: #ffffff; /* or whatever your want */
     pointer-events: none;
     cursor: default;
     }
     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
     text-decoration: default;
     color: #ffffff !important; 
     pointer-events: auto;
     cursor: default;
     }
     td[class="mobile-title"]{font-size: 15px !important;}
     a[class="mobile-text"]{font-size: 16px !important;}
     td[class="mobile-disclaimer"]{font-size: 13px !important;}
     table[class=devicewidth] {width: 320px !important;text-align:center!important;}
     table[class=devicewidthinner] {width: 300px !important;text-align:center!important;}
     table[class="sthide"]{display: none!important;}
     img[class="bigimage"]{width: 300px !important;height:136px!important;}
     img[class="col2img"]{width: 300px !important;height:160px!important;}
     img[class="image-banner"]{width: 320px !important;height:68px!important;}

     }
  </style>
1
Óscar Aguayo 29 मई 2017, 11:19

1 उत्तर

सबसे बढ़िया उत्तर

HTML ईमेल भेजना काफी कष्टप्रद हो सकता है, क्योंकि अधिकांश क्लाइंट एप्लिकेशन सभी CSS गुणों का समर्थन नहीं करते हैं, और कुछ ने <head> को भी काट दिया है। यह 1995 में एक वेबपेज बनाने जैसा लगता है। मुझे लगता है कि ज्यादातर मामलों में मीडिया क्वेरी काम नहीं करेगी, क्योंकि वे बस कट जाती हैं! आपको इसे इनलाइन सीएसएस (आह!) के साथ उत्तरदायी बनाना होगा। मुझे पता है, यह अच्छा नहीं है, लेकिन यह एक HTML मेल बनाने का सबसे अच्छा तरीका है, जो अधिकांश ग्राहकों के अनुकूल है। आप एक छोटे से अवलोकन के लिए इस पृष्ठ पर एक नज़र डालना चाह सकते हैं कि आप क्या उपयोग कर सकते हैं, और संभवतः क्या नहीं:

https://www.campaignmonitor.com/css/

2
Matthias Seifert 29 मई 2017, 11:26
आपके जवाब के लिए धन्यवाद। हालाँकि, मेरी समस्या headऔर मीडिया प्रश्नों के साथ नहीं है, बल्कि मोबाइल फोन के साथ है। अगर head काट दिया जाता तो मेरी शैली का पालन नहीं किया जाता और मेरा ईमेल एक गड़बड़ जैसा दिखता क्योंकि स्क्रीन छोटी है। हालाँकि, मेरी समस्या यह है कि जीमेल मोबाइल ऐप और आउटलुक मोबाइल ऐप (जिनमें से मैंने कोशिश की है), सब कुछ इस तरह से छोटा कर दें कि मेरा ईमेल डेस्कटॉप पर आईफोन 4 की तुलना में बिल्कुल वैसा ही दिखे। समझ में नहीं आता क्यों।
 – 
Óscar Aguayo
30 मई 2017, 10:56
1
यह दिलचस्प है, शायद कुछ व्यूपोर्ट समस्या की तरह लगता है? वैसे भी, मैं अभी भी इनलाइन-शैलियों को लिखने की अनुशंसा करता हूं, क्योंकि निश्चित रूप से वहां बहुत से क्लाइंट हैं, जो हेडर-सीएसएस परिभाषाओं का समर्थन नहीं करते हैं। शायद यह मौजूदा टेम्पलेट का उपयोग करने का विकल्प है? यह बहुत सारे काम बचा सकता है, क्योंकि HTML न्यूज़लेटर टेम्प्लेट लिखना अविश्वसनीय रूप से कष्टप्रद हो सकता है;)
 – 
Matthias Seifert
30 मई 2017, 13:36
1
हाँ, मैंने लिटमस के मुफ़्त टेम्पलेट्स में से एक का उपयोग करके और पूरे ईमेल को फिर से लिखना समाप्त कर दिया। मुझे अभी भी नहीं पता कि ऐसा क्यों हुआ लेकिन उस टेम्पलेट के साथ मैंने काम पूरा कर लिया। आपकी मदद के लिए धन्यवाद, महोदय!
 – 
Óscar Aguayo
31 मई 2017, 11:05