我遇到了新闻通讯的问题。我在其中包含了媒体查询，以便移动查看器获得更好的体验。如果我在浏览器中查看我的时事通讯并调整它的大小，我可以看到它在移动设备/桌面设备上运行良好。但是当我通过 iphone 的邮件应用程序查看它时，由于某些我不知道的原因，我的媒体查询被忽略了。顺便说一句，我正在测试它的邮箱不是 gmail。
你可以在这里看到它: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 的邮件获取此媒体查询吗？
谢谢，
最佳答案
遇到同样的问题
您应该使用“可见性:隐藏”而不是“显示:无”(属性)。我遇到了同样的问题并在“可见性”的帮助下解决了它
element {
visibility: visible;
}
element {
visibility: hidden;
}
其他例子:
{ visibility: hidden; }
{ visibility: visible; }
{ visibility: collapse; }
如果您使用正确的 CSS 属性，您根本不需要“!important”
为了更清楚，请阅读此内容:
关于iphone - 媒体查询不适用于 iPhone 的邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17066613/