我在新闻通讯方面遇到问题。我在其中添加了媒体查询，以便移动观众获得更好的内容。如果我在浏览器中查看新闻通讯并调整其大小，我可以看到它在移动/桌面上都运行良好。但当我通过 iPhone 的邮件应用程序查看它时，我的媒体查询由于某些我不知道的原因而被忽略。顺便说一下，我测试的邮箱不是 Gmail 邮箱。
你可以在这里看到它 ：http://www.libraryofarts.com/newsletters/11-06-13/ http://www.libraryofarts.com/newsletters/11-06-13/
这是我的代码的头部：
<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>
有谁知道为什么我无法通过 iPhone 的 Mail 来处理此媒体查询？
Thanks,
