0

我想提高在移动设备上阅读时事通讯的用户的可用性。

为了做到这一点，我想根据设备的屏幕宽度缩放我的图像。

以下代码在桌面浏览器（带有min-width）中有效，但在使用时会失败min-device-width。

我看到的不是两个相邻的缩放图像，而是一个全尺寸图像，另一个缩放到大约 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

尝试将其添加到头部并height="270" width="360"从代码中删除，应用 css ...

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