HTML Email - кнопка обмена

Question

Это относится к электронной почте HTML. Так что я могу создать кнопку, как так

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;"> 
    <tr> 
     <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;"> 
      <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a> 
     </td> 
    </tr> 
</table> 

Затем в запросе средств массовой информации, я могу сделать что-то изменить эту кнопку для мобильных устройств (в том числе изменение текста)

@media only screen and (max-width: 480px){ 
    .emailButton{ 
     max-width:600px !important; 
     width:100% !important; 
     content: 'new text'; 
    } 

    .emailButton a{ 
     display:block !important; 
     font-size:18px !important; 
    } 
} 

Мой вопрос, будет ли быть любым способом изменить привязку кнопок кнопок? На мобильном телефоне мне нужно связать их с другой страницей, и я хотел бы найти лучший способ сделать это.

Благодаря

Answer 1

I'n 95% уверен, что вы не можете использовать JS внутри электронной почты. Итак, что вы можете сделать, это создать отдельную кнопку для мобильных устройств и отображать ее только при размерах экрана 480 или менее. Я добавил второй медиа-запрос, который гарантирует, что не-мобильный отображается на размерах> 480 пикселей, а мобильный телефон скрыт.

 
@media only screen and (min-width: 481px) { 
 
    #notmobile { 
 
    display: block; 
 
    } 
 
    
 
    #ismobile { 
 
    display: none; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .emailButton { 
 
    max-width: 600px !important; 
 
    width: 100% !important; 
 
    content: 'new text'; 
 
    } 
 
    #notmobile { 
 
    display: none; 
 
    } 
 

 
    .emailButton a #ismobile { 
 
    font-size: 18px !important; 
 
    } 
 
}

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;"> 
 
    <tr> 
 
     <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;"> 
 
      
 
      <a href="..." target="_blank" id="notmobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a> 
 
      
 
      <a href="..." target="_blank" id="ismobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now Mobile</a> 
 
     </td> 
 
    </tr> 
 
</table>

кода не будет работать

Вот живой демо ниже кода, просто измените размер окна браузера. http://codepen.io/anon/pen/GJYXLa

Answer 2

вы можете попробовать следующее:

добавить идентификатор в свой якорный тег

<a href="..." target="_blank" id="buyNowButton" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a> 

после этого на интересующем событии сделать:

$("#buyNowButton").attr("href",newLink); 

Answer 3

Вы можете иметь два <a> и использовать медиа-запросы, чтобы скрыть один из них.

@media only screen and (max-width: 480px) { 
 
    a:not(.mobile-only) { 
 
    display: none; 
 
    } 
 
} 
 
@media only screen and (min-width: 480px) { 
 
    a.mobile-only { 
 
    display: none; 
 
    } 
 
}

<a href="#desktop">Desktop</a> 
 
<a href="#mobile" class="mobile-only">Mobile</a>