সিএসএস সর্বোচ্চ-প্রস্থের সমতুল্য কি এইচটিএমএল ইমেলগুলিতে কাজ করে?

Question

আমি এমন একটি এইচটিএমএল ইমেল তৈরি করার চেষ্টা করছি যা সমস্ত ব্যবহৃত ব্যবহৃত ইমেল ক্লায়েন্টগুলিতে সঠিকভাবে প্রদর্শিত হবে। আমি পুরো ইমেলটি একটি টেবিলের সাথে আবৃত করছি এবং আমি চাই এটির প্রস্থটি উপলব্ধ প্রস্থের 98% অবধি, তবে 800 পিক্সেলের বেশি নয়। এটার মত: <table style="width:98%; max-width:800px;">

তবে আমি এটি সেভাবে করছি না, যেহেতু এই আউটলুক 2007 অনুযায়ী সিএসএস প্রস্থের সম্পত্তি সমর্থন করে না।

পরিবর্তে, আমি এটি করছি: <table width="98%">

সিএসএসের উপর নির্ভর না করে সর্বাধিক প্রস্থ সেট করার কোনও উপায় আছে কি?

Comments

আমি @ মারকনজেন্টের জবাবদিহি করেছি updated :)

— টিম গুডম্যান

Answer 1

হ্যাঁ, max-widthএকটি সারণী ব্যবহার করে অনুকরণ করার একটি উপায় রয়েছে, সুতরাং আপনাকে প্রতিক্রিয়াশীল এবং আউটলুক-বান্ধব বিন্যাস উভয়ই দেয়। আরও কী, এই সমাধানটির জন্য শর্তাধীন মন্তব্যগুলির প্রয়োজন নেই।

আপনি যদি একটি কেন্দ্রিক সমতুল্য চান ধরুন divসঙ্গে max-widthএর 350px। আপনি একটি টেবিল তৈরি করুন, প্রস্থটি এতে সেট করুন 100%। টেবিলটিতে পরপর তিনটি ঘর রয়েছে। কেন্দ্রের প্রস্থকে এতে সেট TDকরার 350(এইচটিএমএল ব্যবহার করে 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> 

জিসফিডেলে আমি টেবিলটিকে একটি সীমানা দিয়েছি যাতে আপনি দেখতে পাচ্ছেন কী চলছে, তবে সম্ভবত আপনি বাস্তব জীবনে একটি চাইবেন না:

http://jsfiddle.net/YcwM7/

Comments

এখানেই সবার সেরা উত্তর ^^^ গৃহীত উত্তর এবং শর্তাধীন উত্তর উপেক্ষা করুন।

— নিক ম্যানিং

কেবল অন্য কাউকে কিছুটা সময় বাঁচানোর জন্য, খালি <td> উপাদানগুলির মধ্যে অন্তত একটির প্রয়োজন, অন্যথায় সামগ্রীতে <td> পুরো <tr> পূরণ করতে প্রসারিত হবে। তবে এটি অবশ্যই দেওয়া সবচেয়ে ভাল সমাধান।

— ক্রিস স্ট্রিকল্যান্ড

@ ফিলিস সুথারল্যান্ড আপনি ইনলাইন ইম্জি আকারটি সরিয়ে এটিকে প্রতিস্থাপনের চেষ্টা করতে পারেন: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;"

— মোর স্পেস54

আমি যেমন করলাম তেমন অভ্যন্তরের প্রস্থে ইউনিট যুক্ত না করার বিষয়ে সতর্কতা অবলম্বন করুন অন্যথায় এটি কাজ করে না! অর্থাত্ প্রস্থ = "350px" করবেন না

— Magritte

@ ফিলিসসথারল্যান্ড ইমেজগুলির জন্য একটি সমাধান খুঁজে পেয়েছে: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> লিটমাস.com

— ডিসকসিউশনস্

Answer 2

শর্তাধীন এইচটিএমএল মন্তব্যগুলি ব্যবহার করে আপনি আউটলুক 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 ইমেলের জন্য আরও ভাল কাজ করে better আমার অভিজ্ঞতায় আপনি HTML এর ইমেলগুলির কথা বলতে গেলে 1999 এর ভান করার পক্ষে সেরা হন। স্পষ্ট হয়ে উঠুন এবং এইচটিএমএল বৈশিষ্ট্যগুলি (প্রস্থ = "650") ব্যবহার করুন যেখানে আপনার টেবিল সংজ্ঞাগুলিতে যেখানে সম্ভব হবে, সিএসএস নয় (শৈলী = "প্রস্থ: 650px")। নির্দিষ্ট প্রস্থ, কোন শতাংশ ব্যবহার করুন। 650 পিক্সেল প্রশস্ত একটি টেবিল প্রস্থ একটি নিরাপদ বাজি। পাঠ্য বৈশিষ্ট্য সেট করতে ইনলাইন সিএসএস ব্যবহার করুন।

এটি "এইচটিএমএল ইমেলগুলি" তে কী কাজ করে তা নয়, বরং ইমেল ক্লায়েন্টদের আধিক্য এবং তাদের সীমিত (এবং কখনও কখনও জিমেইল, হটমেল ইত্যাদির ক্ষেত্রে এইচটিএমএল রেন্ডার করার ক্ষমতা)।

Comments

হ্যাঁ, এটাই আমি প্রত্যাশা করেছিলাম তবে আমি অনুভব করেছি যে আমি জিজ্ঞাসা করব।

— টিম গুডম্যান

650 এর একটি নির্দিষ্ট প্রস্থ নির্ধারণ করা আপনার ইমেলগুলি মোবাইল ইমেল ক্লায়েন্টগুলিকে ভয়ঙ্কর দেখায়।

— ড্র্রুবি

-1: এটি ভয়ঙ্কর দেখাচ্ছে কারণ মোবাইল ডিভাইসগুলির আসল বিশ্বে তুলনামূলকভাবে ছোট মাত্রা রয়েছে। এর অর্থ জুমিং এবং প্যানিং ছাড়া আপনার ডিজাইনের পাঠ্যটি অপঠিতভাবে ছোট হবে। ক্যাম্পেইন মনিটরের গাইড প্রতিক্রিয়াশীল ইমেল ডিজাইনটি একবার দেখুন ।

— কার্ল হর্কি

-1 এছাড়াও কারণ আমি কেবল মোবাইল ক্লায়েন্টগুলিতে এটি মোকাবেলা করেছি এবং একটি নির্দিষ্ট প্রস্থ থাকা আমার সমস্যা ছিল was

— ব্রায়ান ফিটজগেরাল্ড

বছরটি ২০১৫ Mobile মোবাইল ডিভাইস সর্বত্র রয়েছে। আপনি বোকা দৃষ্টিভঙ্গির জন্য মোবাইল ডিভাইসগুলি ভুলে যেতে বলছেন? আমি বলি, দৃষ্টিভঙ্গি ভুলে যাও এবং মাইক্রোসফ্ট থেকে সমস্ত অন্যান্য shitty পণ্য।

— রেফেলিও

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

— হেনরি

@ চেন্নালি আমি সমস্ত সেলপ্যাডিং ফন্ট-আকারের বৈশিষ্ট্যগুলি ইত্যাদির উল্লেখ করছি etc. চিত্রগুলি একটি মুশকিল কারণ আপনি যদি একটি অ্যাট্রিবিউট হিসাবে প্রস্থ = "500" নির্দিষ্ট না করেন তবে পিক্সেল আউটলুকের 500 প্রস্থ চিত্রগুলি পূর্ণ আকারে পরিণত করবে ( চিত্র চিত্র ফাইল) এর ফলে সাধারণত স্থির প্রস্থে ফলাফল হয়।

— এডিএল

এটিকে ছেড়ে যাওয়া কারণ এটি আমার কোড নয় —আমি এটি কেবল গিস্ট থেকে উদ্ধৃত করছি তবে আমি এটিকে একটি সম্প্রদায় উইকি বানিয়েছি। আমি বিশ্বাস করি নেই স্পষ্টভাবে উল্লেখ করা প্রয়োজন 0px paddings এবং marginগুলি সেইসাথে 0 cellpaddingএবং cellspacing। এটি নির্দিষ্ট করে দেওয়া সম্ভব যে সময়গুলি পূরণ করার line-heightবিকল্প হিসাবে কাজ করবে এটি সম্মানিত নয় (আমি এটি সমস্ত ক্ষেত্রে পরীক্ষা করতে চাই এবং তারপরে এটি ঠিক কোথায় প্রয়োজন তা দেখতে সকলের উপর পরীক্ষা করতে চাই )। @ এডিএল আপনি যদি একটি হালকা সমাধান কাজ করতে সক্ষম হন পাশাপাশি এটি দুর্দান্তও হতে পারে - দয়া করে এটি এখানে এবং সেই লিঙ্কযুক্ত গিস্টে পোস্ট করুনfont-sizeheighttrtd

— হেনরি