2016-08-24 2 views
0

Der Versuch, nur den Code mobil freundlich zu machen basiert nur auf Gmail Mobile. Daher werden keine weiteren media queries benötigt, da dies nicht für Google Mail funktioniert. Bitte helfen Sie mir, da ich neu und verwirrt bin, wenn ich mir die Google Mail-Lösungen anschaue. Es funktioniert gut in Desktop, aber nicht in mobilen Outline CSS nicht funktioniert auch für Google Mail. Nur Inline CSSResponsive Mobile Design für Google Mail-App

<table cellpadding="0" cellspacing="0" class="container-table" style="margin:0; padding:0;border:0;width:100%; max-width:800px;"> 
    <tr> 
    <td> $container1 
     <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0;min-width:100%;"> 
     <tr> 
      <td width="450"><div id="minicontainer1" style="padding: 5px 0 0 20px; height:80px;line-height:50%;box-sizing:border-box;"> 
       <p class="font1" style="font-family: Helvetica; font-size:11pt;font-weight:bold; color:black;"> Name of the person </p> 
       <p class="font2" style="font-family: Helvetica; font-size:9.5pt; color:black;"> Web Developer </p> 
       <p class="font2" style="font-family: Helvetica; font-size:9.5pt; color:black;"> Phone number </p> 
      </div> 
      <div id="minicontainer2" style=" padding:0 0 0 20px; margin-top:-10px; line-height:50%;box-sizing:border-box;"> 
       <p class="font1 diffsize" style="font-family: Helvetica; font-size:8pt; font-weight:bold; color:black;"> $company </p> 
       <div class="font2 diffsize" style="font-family: Helvetica; font-size:8pt; color:black; line-height: 12px;"> 
       <p> $address. </p> 
       <p> Phone : <span id="special" style="color: #0000EE !important; text-decoration: underline;"> $telno </span> | Fax :<span id="special" style="color: #0000EE !important; text-decoration: underline;"> $faxno </span> </p> 
       </div> 
      </div></td> 
      <td width="220" align="center"> $logo </td> 
      <td width="110" align="center"> $imgshow </td> 
     </tr> 
     </table> 
     $royalty 
     <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0; min-width:100%;"> 
     <tr> 
      <td><div id="minicontainer4" style="padding:15px 0 0 20px; width:92%; box-sizing:border-box;"> 
       <p class="font3" style=" font-family: Helvetica; font-size:6pt; font-weight:lighter; color:black; letter-spacing:0.25px; text-align:center;"> Prohibited EMail.</p> 
      </div></td> 
     </tr> 
     </table> 
     <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0; min-width:100%;"> 
     <tr> 
      <td width="800"><div id="minicontainer5" style="height:40px; background-color: #EBF2F0; margin-top:15px; padding:4px 0 0 70px;"> 
       <div id="box2" style="margin:0 auto; text-align:center; width:500px; box-sizing:border-box;"> 
       <ul style="list-style:none; margin:5px;"> 
        <li style="float:left; padding: 0 10px; font-family: Helvetica; font-size:9.5pt;color:black; margin:5px 0 0 10px;">Website : $web </li> 
        <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.facebook.com" target="_blank"> <img src="email_signature/images/facebook.png"> </a> </li> 
        <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.twitter.com/" target="_blank"> <img src="email_signature/images/twitter.png"> </a> </li> 
        <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.plus.google.com/" target="_blank"> <img src="email_signature/images/googleplus.png"> </a> </li> 
       </ul> 
       </div> 
       <div class="clear" style="clear:both;"> </div> 
      </div></td> 
     </tr> 
     </table> 
     <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0;min-width:100%;"> 
     <tr> 
      <td width="800"><div id="minicontainer6" style=" padding-top:5px; text-align: center; box-sizing:border-box;"> 
       <p class="font2" style="font-size:5.5pt; font-family: Helvetica; color:black;"> Comapny limited </p> 
      </div></td> 
     </tr> 
     </table> 
     </div></td> 
    </tr> 
</table> 

Antwort

0

ich diesen Kommentar würde, da es nicht eine direkte Antwort ist, aber ich habe nicht genug rep ...

Da Medien-Anfragen werden nicht auf der Google Mail-Anwendung unterstützt ist es ein ziemlich in Tiefenproblem anzugehen. Bei der Verwendung dieser Methode müssen Sie möglicherweise Ihre E-Mail erneut erstellen, aber dieses Lernprogramm ist sehr hilfreich: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919