HTMLメールのmetaタグ viewportについて

<meta name="viewport" content="width=device-width,initial-scale=1.0">

レスポンシブさせるために必要なため、必ず入れるようにしてください。
なお、CSSのメディアクエリが効かないメーラーもあるため、メディアクエリを使ってレスポンシブするわけではありません。
HTMLの組み方によってレスポンシブ対応が可能です。

例）600pxの幅で作成する場合

<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<!-- 横幅いっぱいの画像 -->
<tr>
<td width="600" style="font-size:0;"><img src="img/main.jpg" width="600" alt="" style="display:block;width:100%;max-width:600px;height:auto;"></td>
</tr>
<tr>
<td height="10" style="font-size:0;"></td>
</tr>
</table>

<table>タグではなく、<td>タグにwidthを設定します。そうすることでスマートフォンの画面幅に合わせて、全体の幅が自動で調整されるようになります。
ただし、CSSが効くメーラー用にmax-width:600px;はつけておいてください。600px以上にならないように念のため（おまじないみたいなものです）

逆に<table>タグにwidthを設定した場合は、スマホの画面からはみ出たような状態になるメーラーもあります。
画面幅に合わせて自動調整された場合は、全体が縮小されて文字など小さくなって読みにくくなります。