0

I'd like to improve usability of my newsletter for people who read it on their mobile devices.

In order to do that I want to scale my images according to device's screen width.

The following code works in a desktop browser (with min-width) while it fails when min-device-width is used.

Instead of two scaled images next to each other I see one full size image and the other one is scaled to about 2px/2px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<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>

howtodothis
  • 1,265
  • 4
  • 17
  • 30
  • look at my answer here: http://stackoverflow.com/questions/11065162/defining-css-media-queries/11091805#11091805 it tells you the difference between using `device-width` vs just `width`. You'll find that it's safer to just use `width`, because regardless of the the actual device's screen size - `width` will target the size of the browser/viewport that's being used. – Suvi Vignarajah Jun 29 '12 at 15:04

1 Answers1

2

Try add this to head and also remove height="270" width="360" from the code, apply css...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
SaurabhLP
  • 3,619
  • 9
  • 40
  • 70