0

携帯端末でニュースレターを読んでいる人のために、ニュースレターの使いやすさを改善したいと考えています。

そのためには、デバイスの画面幅に合わせて画像をスケーリングしたいと考えています。

次のコードは、デスクトップ ブラウザー ( を使用min-width) では機能しますが、 を使用すると失敗しますmin-device-width。

隣り合う 2 つの拡大縮小された画像の代わりに、1 つのフルサイズの画像が表示され、もう 1 つは約 2px/2px に拡大縮小されています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
    <head>
       <title></title>
    </head>
<body>

<style type="text/css">
    @media only screen and (min-device-width : 100px) and (max-device-width : 480px) {
        body {
            background: red;
        }
        table[class='element'] {
          width: 100%;
        }
        table[class='element'] img {
            width: 100%;
            height: auto;
        }
    }
</style>

<table class="element" align="center" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><img src="http://www.dummyimage.com/360x270/ddd/fff.jpg" alt="" height="270" width="360"></td>
      <td><img src="http://www.dummyimage.com/360x270/ccc/fff.jpg" alt="" height="270" width="360"></td>
    </tr>
  </tbody>
</table>

4

1 に答える 1

2

これをheadに追加height="270" width="360"し、コードから削除して、cssを適用してみてください...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2012-06-29T05:22:07.583 に答える