I had perfected responsive design on iPhones until my coworkers updated their iPhones. All of a sudden my media querries no longer triggered with this update. Anyone else see their responsive design email stop working lately with this new iPhone update? Here's the first few lines of code that I am using, which shrinks images/tables while enlarging fonts:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
</head>
<style type="text/css">
@media screen and (min-width: 640px) {
span[id=mobile-logo] 
    {display: none !important;}
}

@media screen and (max-width: 640px) {

/*------ top header ------ */
 p[class="main-headline"] {
font-size:16px !important;
}
 p[class="main-text"] {
font-size:16px !important;
line-height: 25px !important;
}
 ul[class="main-text"] {
font-size:16px !important;
line-height: 25px !important;
}
 p[class="footer-text"] {
font-size:9px !important;
line-height: 12px !important;
-webkit-text-size-adjust:none !important;
}
/*--------logo-----------*/
 span[id=desktop-logo] 
    {display: none !important;}

/*--------logo-----------*/
.logo {
width: 128px !important;
}
/*----- main image -------*/
img[class="main-image"] {
width: 330px !important;
height: auto !important;
}
img[class="shrink-clear-gif"] {
height: 10px !important;}

img[class="banner-image"] {
width: 310px !important;
height: auto !important;
}
img[class="normal-size"] {
width: auto !important;
height: auto !important;
}