I have coded an email template that works accross all clients but gets cut off (content to the right) in Windows Mobile.
The only way to get it to work in Windows Mobile is to add:

@media screen and (max-device-width:600px){
    body[yahoo] .content{
        min-width:320px !important;
        max-width:320px !important;
    }
}

to the tables that hold the 600px wide content. That blows up my fonts in all other mobile clients though.

I have tried to instead add:

@media only screen and (max-width:600px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
}

but that still cuts off the right side of my email in Windows mobile / seems to have no effect.

What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Responsive Viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Prevent IE QuirksMode -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style type="text/css">
      @media screen and (max-device-width:600px){
          body[yahoo] .content{
              min-width:320px !important;
              max-width:320px !important;
          }
      }
      @media only screen and (max-device-width: 600px){
          .col287{
              max-width:100% !important;
              width:100% !important;
          }
      } 
      @media screen and (max-device-width:600px){
          body[yahoo] img{
              width:100%;
              height:auto;
          }
      } 
      @media screen and (max-device-width:600px){
          body[yahoo] .hide{
              display:none!important;
          }

      }
      @media screen and (max-device-width:600px){
          body[yahoo] .mobile{
              overflow:visible !important;
              float:none !important;
              display:block !important;
              line-height:100% !important;
          }
      }
      @media screen and (max-device-width:600px){
          body[yahoo] .mobileBrowser{
              display:block;
              text-align:right;
              font-style:normal;
              font-family:Lucida Sans, Arial, sans-serif;
              font-size:12px;
              color:#999999;
              padding:5px 0;
              margin-bottom:10px;
          } 
      } 
      @media screen and (max-device-width:600px){
          body[yahoo] .viewBrowser{
              padding:10px !important;
          }
      } 
      @media screen and (max-device-width:600px){
          body[yahoo] .footercopy{
              padding-right:10px !important;
              padding-left:10px !important;
          }
      } 
      @media screen and (max-device-width:600px){
          body[yahoo] .unsubscribe{
              display:block;
              margin-top:20px;
              padding:10px 50px;
              background:#666666;
              color:#ffffff!important;
              border-radius:5px;
              text-decoration:none!important;
              text-align:center;
              font-style:normal;
              font-family:Lucida Sans, Arial, sans-serif !important;
          }
      } 
      @media only screen and (min-device-width: 601px){
          .content{
              width:600px !important;
          }
      } 
      @media only screen and (min-device-width: 601px){
          .col287{
              width:287px !important;
          }
      }
  </style>
</head>