Question

我正面临着时事通讯的问题。我在其中包含了媒体查询，因此移动观众可以获得更好的内容。如果我在浏览器中查看我的简报并调整其大小，我可以看到它在移动/桌面上都可以正常工作。但是当我通过iphone的Mail应用程序查看时，由于某些我不知道的原因，我的媒体查询被忽略了。我正在测试它的邮箱顺便说一下不是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的Mail获取此媒体查询？

谢谢，

媒体查询无法在iPhone的邮件上运行

0 个答案: