1

モバイル デバイス用に電子メールのサイズを変更するが、テキストのサイズは維持する電子メール メッセージのコード スニペットが見つかりました。

メール メッセージには分割画像を使用し、画像の上にテキストを表示します。問題は、tr コマンドで画像に白い線が表示されることです。次のコードがヘッダーから削除されると、イメージは白い線なしで表示されます。コードを追加し直すと、iPhone または Droid でメールを表示しているときに白い線を取り除くことができません。すべての電子メール クライアントのデスクトップ/ラップトップに完全に表示されます。

head セクションに配置したコードを次に示します。

<style type="text/css"> @media only screen and (max-width: 600px)
  {/*CSS styles here will be applied on supporting mobile devices*/
  table, div {width:100% !important; max-width: 600px !important; position:relative !important; height:auto !important; overflow:hidden !important; top:0px !important;}
  img {max-width:100%; height: auto !important;}}
</style>

白い線を取り除く方法について何か提案はありますか?

4

2 に答える 2

0

display:block;イメージタグを試してみてください。

于 2013-02-06T21:26:29.827 に答える
0

position:relative は奇妙に思えます。また、 height:auto !important; を指定する必要はないと思います。

画像をレスポンシブにしようとしている場合、つまりコンテナ要素の幅を常に 100% にする場合は、 width="100% を指定し、高さの指定を省略できます。適切な比率で拡大/縮小されます。

iPhoneなどのモバイルデバイスで画像の上のテキストのサイズが変更されないようにするためのコードが必要な場合は、これらを使用しています。

div, p, a, li, td { -webkit-text-size-adjust:none; }
     #outlook a {padding:0;} /* Force Outlook to provide a "view in
browser" menu link. */
     html{width: 100%; }
     body{width:100% !important; -webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%; margin:0; padding:0;}
     /* Prevent Webkit and Windows Mobile platforms from changing
default font sizes, while not breaking desktop design. */
     .ExternalClass {width:100%;} /* Force Hotmail to display emails at
full width */
     .ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /*   

Hotmail to display normal line spacing. */
     .backgroundTable {margin:0; padding:0; width:100% !important;
line-height: 100% !important;}
     img {outline:none; text-decoration:none;border:none;
-ms-interpolation-mode: bicubic;}
于 2014-04-16T02:54:15.330 に答える