3

ニュースレターで問題に直面しています。モバイル視聴者がより良いものを得られるように、メディア クエリを含めました。ニュースレターをブラウザーで表示してサイズを変更すると、モバイル/デスクトップの両方で問題なく動作することがわかります。しかし、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 の Mail でこのメディア クエリを動作させられない理由を知っている人はいますか?

ありがとう、

4

0 に答える 0