क्या HTML ईमेल में काम करने वाली CSS अधिकतम-चौड़ाई के बराबर है?

Question

मैं एक HTML ईमेल बनाने की कोशिश कर रहा हूं जो सभी व्यापक रूप से उपयोग किए जाने वाले ईमेल क्लाइंट में ठीक से प्रदर्शित होगी। मैं एक तालिका में पूरे ईमेल को लपेट रहा हूं, और मैं चाहूंगा कि इसकी चौड़ाई ऐसी हो जो उपलब्ध चौड़ाई के 98% तक हो, लेकिन 800 पिक्सल से अधिक न हो। ऐशे ही: <table style="width:98%; max-width:800px;">

लेकिन मैं इसे इस तरह से नहीं कर रहा हूं, क्योंकि इस आउटलुक 2007 के अनुसार सीएसएस चौड़ाई संपत्ति का समर्थन नहीं करता है।

इसके बजाय, मैं यह कर रहा हूँ: <table width="98%">

क्या सीएसएस पर भरोसा किए बिना अधिकतम-चौड़ाई निर्धारित करने का कोई तरीका है?

Comments

मैंने @MarkNugent से स्वीकार किए गए उत्तर को अपडेट किया है क्योंकि ऐसा लगता है कि आम सहमति बन गई है - भले ही मुझे उपयोगी होने में 4 साल बहुत देर हो गई हो। :)

— टिम गुडमैन

Answer 1

हां, max-widthतालिका का उपयोग करने का एक तरीका है , इस प्रकार आप दोनों को उत्तरदायी और आउटलुक के अनुकूल लेआउट देते हैं। क्या अधिक है, इस समाधान के लिए सशर्त टिप्पणियों की आवश्यकता नहीं है।

मान लीजिए कि आप के divसाथ केंद्रित के बराबर चाहते max-widthहैं 350px। आप एक तालिका बनाते हैं, जिस पर चौड़ाई सेट करते हैं 100%। तालिका में एक पंक्ति में तीन कोशिकाएँ होती हैं। केंद्र की चौड़ाई सेट TDकरने के लिए 350(HTML का उपयोग करwidth विशेषता, नहीं सीएसएस), और तुम वहाँ जाओ।

यदि आप चाहते हैं कि आपकी सामग्री केंद्र के बजाय बाईं ओर संरेखित हो, तो पहले खाली सेल को छोड़ दें।

उदाहरण:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

Jsfiddle में मैं टेबल को एक सीमा देता हूं ताकि आप देख सकें कि क्या चल रहा है, लेकिन जाहिर है कि आप वास्तविक जीवन में एक नहीं चाहेंगे:

http://jsfiddle.net/YcwM7/

Comments

यह सबसे अच्छा जवाब है, यहाँ हर कोई ^ ^ ^ ^। स्वीकृत उत्तर और सशर्त उत्तर की उपेक्षा करें।

— निक मैनिंग

बस किसी और को बचाने के लिए, कम से कम उन खाली <td> तत्वों में से एक आवश्यक है, या अन्यथा <td> सामग्री के साथ पूरे <tr> को भरने के लिए खिंचाव होगा। लेकिन यह निश्चित रूप से की पेशकश की सबसे अच्छा समाधान है।

— क्रिस स्ट्रिकलैंड

@Phyllis सदरलैंड आप इनलाइन img आकार को हटाने और इसे बदलने की कोशिश कर सकते हैं:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"

— morespace54

इकाइयों को आंतरिक चौड़ाई में जोड़ने के लिए सावधान रहें जैसे मैंने किया या फिर यह काम नहीं करता है! अर्थात चौड़ाई न करें = "350px"

— मैग्रीट

@PhyllisSutherland ने छवियों के लिए एक निर्धारण पाया: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…

— cbron

Answer 2

सशर्त HTML टिप्पणियों का उपयोग करके आप Outlook 2007 के लिए एक चाल कर सकते हैं।
नीचे दिए गए कोड से यह सुनिश्चित हो जाएगा कि आउटलुक तालिका 800px चौड़ी है, इसकी अधिकतम-चौड़ाई नहीं है, लेकिन यह पूरी विंडो में तालिका की अवधि बताने से बेहतर है।

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>

Comments

उत्कृष्ट सुझाव है, लेकिन चूंकि यह एक आईडी चयनकर्ता है और एक वर्ग नहीं है, आप टेबल तत्व पर चौड़ाई

— अटर

यह भी खूब रही। एक समस्या को छोड़कर, चौड़ाई निर्धारित करके, आउटलुक ईमेल को दिए गए आयामों से छोटा नहीं होने देगा। चौड़ाई निर्धारित नहीं करने से, ईमेल पूरे स्क्रीन पर विस्तारित हो जाएगा। अपने जहर को उठाओ :)

— समन्वयक

Answer 3

संक्षिप्त उत्तर: नहीं।

लंबे उत्तर:

HTML ईमेल के लिए निश्चित प्रारूप बेहतर काम करते हैं। जब आप HTML ईमेल की बात करते हैं तो मेरे अनुभव में यह 1999 का दिखावा है। स्पष्ट रहें और HTML विशेषताओं (चौड़ाई = "650") का उपयोग करें जहां कभी भी आपकी तालिका परिभाषाओं में संभव हो, न कि CSS (शैली = "चौड़ाई: 650px")। निश्चित चौड़ाई का उपयोग करें, कोई प्रतिशत नहीं। 650 पिक्सल चौड़ा एक टेबल की चौड़ाई एक सुरक्षित शर्त है। पाठ गुणों को सेट करने के लिए इनलाइन सीएसएस का उपयोग करें।

यह "HTML ईमेल" में काम करने की बात नहीं है, बल्कि ईमेल क्लाइंट और उनके सीमित (और कभी-कभी जानबूझकर जीमेल, हॉटमेल आदि के मामले में) HTML को रेंडर करने की क्षमता के ढेर सारे हैं।

Comments

हाँ, यह वही है जो मुझे उम्मीद थी, लेकिन मुझे लगा कि मैं पूछूंगा।

— टिम गुडमैन

650 की निश्चित चौड़ाई निर्धारित करने से आपके ईमेल मोबाइल ईमेल क्लाइंट में भयानक दिखेंगे।

— DrewB

-1: यह भयानक लग रहा है क्योंकि मोबाइल उपकरणों के वास्तविक दुनिया में अपेक्षाकृत छोटे आयाम हैं। इसका मतलब है कि ज़ूमिंग और पैनिंग के बिना, आपके डिज़ाइन में पाठ अपठित रूप से छोटा होगा। अभियान मॉनिटर गाइड उत्तरदायी ईमेल डिज़ाइन पर एक नज़र डालें ।

— कार्ल होर्की

-1 इसलिए भी क्योंकि मैंने मोबाइल क्लाइंट्स में सिर्फ इससे निपटा था और एक निश्चित चौड़ाई होने से मेरी समस्या ठीक थी।

— ब्रायन फिजरगार्ड

वर्ष 2015 है। मोबाइल डिवाइस हर जगह हैं। आप बेवकूफ दृष्टिकोण के लिए मोबाइल उपकरणों के बारे में भूल जाने के लिए कह रहे हैं? मैं कहता हूं, आउटलुक के बारे में भूल जाओ। और Microsoft से प्रत्येक अन्य चमकदार उत्पाद।

— Refaelio

Answer 4

पार्टी के लिए थोड़ा देर से, लेकिन यह इसे पूरा करेगा। मैंने 600 पर उदाहरण छोड़ दिया, जैसा कि ज्यादातर लोग उपयोग करेंगे:

इसके अलावा शाए के उदाहरण में भी अधिकतम-चौड़ाई शामिल है बाकी ग्राहकों पर काम करने के लिए , जिनके पास समर्थन है, साथ ही विस्तार (मीडिया क्वेरी) को रोकने के लिए एक दूसरी विधि है जो आउटलुक '11 के लिए आवश्यक है।

सिर में:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

शरीर में:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

उपयोग में इसका एक और उदाहरण है: मोबाइल उपकरणों के लिए उत्तरदायी आदेश पुष्टिकरण ईमेल?

Answer 5

यह वह उपाय है जो मेरे लिए काम करता है

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , @ फिलिप-क्लिनज़ को धन्यवाद

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

Comments

क्या आप अधिक संक्षिप्त उदाहरण प्रदान कर सकते हैं, इसमें बहुत सा सामान है जो प्रश्न को हल करने के लिए आवश्यक नहीं है

— एडल

विचार @EdL वह यह है कि है ईमेल के अनुकूल होने का सबसे संक्षिप्त तरीके से max-width। यह पूरी चीज बदल जाएगी <div style="max-width: ...px">...</div>। ईमेल के लिए जब मैं काम कर रहा था जब मुझे यह पता चला, यह एकमात्र समाधान था जिसने चीजों को आउटलुक 2010, 2013 और 2016 में सही देखा।

— हेनरी

@ जब मैं सभी सेलपैडिंग फ़ॉन्ट-आकार विशेषताओं आदि का अधिक उल्लेख कर रहा था, छवियां एक मुश्किल है क्योंकि जब तक आप चौड़ाई = "500" को एक विशेषता के रूप में निर्दिष्ट नहीं करते हैं, जहां 500 पिक्सल की चौड़ाई में चौड़ाई छवियों को पूर्ण आकार में लाएगी (" wrt (छवि फ़ाइल) यह आम तौर पर निश्चित चौड़ाई में परिणाम है।

— एडल

इसे छोड़कर क्योंकि यह मेरा कोड नहीं है - मैं इसे सिर्फ जीआईटी से उद्धृत कर रहा हूं- लेकिन मैंने इसे एक सामुदायिक विकि बना दिया है। मेरा मानना है कि यह है स्पष्ट रूप से निर्दिष्ट करने के लिए आवश्यक 0px paddingहै और marginएस के साथ-साथ 0 cellpaddingऔर cellspacing। यह निर्दिष्ट line-heightकरना संभव है font-sizeकि समय के लिए भरने के लिए एक विकल्प के रूप में काम करेंगे heightसम्मान नहीं है (मैं इसे सभी पर परीक्षण करना चाहता हूं trऔर फिर सभी tdएस पर यह देखने के लिए कि यह कहां की आवश्यकता है)। @ ईडीएल यदि आप एक हल्का समाधान प्राप्त करने में सक्षम हैं और साथ ही साथ यह बहुत बढ़िया होगा - कृपया इसे यहाँ पोस्ट करें और उस लिंक किए गए हिस्टरी में

— हेनरी