问题
I'm facing a problem with a newsletter. I have included media queries in it so mobile viewers get something nicer. If I view my newsletter in a browser and resize it, I can see that it works fine, both on mobile/desktop. But when I view it through iphone's Mail app, my media queries are getting ignored for some reasons I'm not aware about. The mailbox I'm testing it with isn't a gmail one by the way.
You can see it here : http://www.libraryofarts.com/newsletters/11-06-13/
Here's the head part of my code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Pre-Opening librairie LO/A</title>
<style type="text/css" media="screen">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode:bicubic;}
/*
* RESET STYLES
*/
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/*
* MOBILE STYLES
*/
@media only screen and (max-device-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#bodyCell{padding:10px !important;}
/* ======== Page Styles ======== */
#templateContainer{
max-width:700px !important;
width:100% !important;
}
h1{
font-size:24px !important;
line-height:100% !important;
}
h2{
font-size:20px !important;
line-height:100% !important;
}
h3{
font-size:18px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#templateHeader p {
pointer-events: none;
}
#templateHeader p > a {
text-decoration:none; color:inherit;
}
#headerImage{
height:auto !important;
max-width:700px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
/* ======== Body Styles ======== */
.bodyContent{
font-size:18px !important;
line-height:125% !important;
}
/* ======== Column Styles ======== */
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
/* ======== Footer Styles ======== */
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.footerContent.Bottom {
text-align : center;
}
.footerContent.Bottom .online {
margin-left : 0;
margin-top : 10px;
display : block;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
.footerContent ul {
list-style: none;
margin : 0;
padding : 0;
}
.footerContent ul li {
float : none !important;
}
.footerContent ul li img {
display : block;
margin : 0 auto;
}
.test {display : none !important;}
}
</style>
Has anyone an idea on why I can't get this media query working through iphone's Mail ?
Thanks,
来源：https://stackoverflow.com/questions/17066613/media-queries-not-working-on-iphones-mail