如何在 iphone 上隐藏/显示 h2 和 ul 标签？答案

【问题标题】：How can I hide/show h2 and ul tags on the iphone?如何在 iphone 上隐藏/显示 h2 和 ul 标签？
【发布时间】：2015-11-27 12:15:39
【问题描述】：

我无法让电子邮件爆炸隐藏和显示 h2 和 ul 标签。它在 Outlook 和大多数浏览器中工作得很好，但在 iphone 上显示：块属性不受尊重。我还尝试将内容包装在 div 标签中，并且忽略了属性。有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WalkGreen&trade; Capabilities</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">


@media (max-width: 767px) {
  h2[class=hidden-xs], ul[class=hidden-xs] {
    display: none !important;
  }

}

/* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    h2[class=visible-xs], ul[class=visible-xs] {
    display: block !important;
  }
  p[class=align-center]{text-align:left !important;}

/* This resizes tables and images to be 100% wide with a proportionate width */
    table[class=emailwrap], img[class=emailwrap]{width:100% !important; height:auto !important;}
    h2[class=mobile-pad]{padding-left:8px !important; padding-right:8px !important;}
    img[class=logo-sm]{width:35%;}
    img[class=img-mob]{width:90% !important; height:auto !important;}
    img[class=mbl-icon]{width: 32px !important; height:32px !important;}
    td[class=mbl-pad-1]{padding-left:16px !important; padding-right:16px !important;}
    td[class=mbl-pad-2]{padding-left:16px !important; padding-right:16px !important; text-align:left !important;}
    td[class=mbl-pad-3]{padding-top:16px;}
    td[class=border-off]{border-bottom:0 !important;}
    a[class=mbl-button]{webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top:10px !important; padding-right:10px !important; padding-bottom:10px !important; padding-left: 10px !important; font-size:18px !important;}

/* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    td[class=emailcolsplit]{width:100%!important; float:left!important;}

    a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd    !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}

/* This resizes body text for mobiles */
    ul[class=emailbodytext],span[class=emailbodytext],a[class=emailbodytext] ,p[class=emailbodytext]{font-size:16px !important; line-height:21px !important;padding-right:16px !important;}
    h2[class=emailh2],span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
    td[class="mbl-header"]{padding-right:8px !important; padding-left:8px !important;}

}

</style>

</head>

<body style="background-color:#FFF;">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <!-- top disclaimer -->
                <table class="emailnomob" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:8px; padding-right:8px; padding-bottom:8px; padding-left:8px; color:#999">
                            <span>TROUBLE SEEING SOMETHING? </span><a style="color:#999;" href="#">VIEW IT ONLINE</a> OR <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a>
                        </td>
                    </tr>
                </table>
                <!-- content begins -->
                <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
                    <tr>
                        <td>
                            <!-- top banner -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td>

<a href="http://www.walkgreenproducts.com/decking.html"><img class="emailwrap" src="images/top-banner2.gif" alt="Exotic Hardwood Decking, Rainscreen and Fencing" /></a>

                                    </td>
                                </tr>
                            </table>
                            <!-- 3 column content -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
                                <tr>
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td class="mbl-pad-3">
                                                    <img src="images/products.gif" alt="Products" />
                                                    <h2  class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Decking</h2>
                                                    <ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
                                                        <li>Angelyn <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
                                                        <li>Cumaru <br/> (1” x 5.5”) (1” x 3.5”) (7/8” x 5.5”)<br/> </li>
                                                        <li>Espresso Garapa <br/>  (7/8” x 5.5”)<br/> </li>
                                                        <li>Gold Garapa <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
                                                        <li>Tigerwood <br/> (1” x 3.5”)<br/> </li>
                                                    </ul>
                                                            <h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Rainscreen & Siding</span></h2>
                                                            <ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none;">
                                                                <li class="emailbodytext">Profiling for any hidden siding fastener system</li>
                                                            </ul>
                                                            <h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Fencing</span></h2>
                                                            <ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none">
                                                                <li class="emailbodytext">Fence Boards</li>
                                                            </ul>   

                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <img src="images/milling.gif" alt="Milling" />
                                                    <h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Custom Milling</h2>
                                                    <ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
                                                        <li>Tongue & Groove</li>
                                                        <li>Siding Profiles</li>
                                                        <li>Edge Grooving for hidden fastening systems</li>
                                                        <li>Anti skid decking</li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <img src="images/delivery.gif" alt="Delivery" />
                                                    <h2  class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Options</h2>
                                                    <ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
                                                        <li>Large Volumes</li>
                                                        <li>LTL</li> 
                                                        <li>Full Container or Trucks</li> 
                                                        <li>Contractor Packs</li>
                                                        <li>Special Orders</li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- 2 column content -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
                                <tr>
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Rainscreen & Siding</h2>
                                                    <ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
                                                        <li>Profiling for any hidden siding fastener system</li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>   
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <h2  class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Fencing</h2>
                                                    <ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
                                                        <li>Fence Boards</li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="emailcolsplit" width="200" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td><p class="align-center" style="text-align:right; margin-top:0; margin-bottom:0;"><img src="images/logos.gif" alt="US Greenbuilding Council, Rainforest Alliance, FSC Certificate" /></p></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- species heading -->
                            <table style="background-color:#4982a5;" cellpadding="0" cellspacing="0" width="100%" align="center" >
                                <tr>
                                    <td align="center">
                                        <img src="images/species.gif" alt="Species" />
                                    </td>
                                </tr>
                            </table>
                            <!-- species thumbnails -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
                                <tr>
                                    <td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" align="center" width="100%">
                                            <a href="http://www.walkgreenproducts.com/decking_angelyn.html"><img class="emailwrap" src="images/angelyn.jpg "width="110" height="119" alt="Angelyn" /></a>
                                            <h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Angelyn</h2>
                                        </table>
                                    </td>
                                    <td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" align="center" width="100%">
                                            <a href="http://www.walkgreenproducts.com/decking_cumaru.html"><img class="emailwrap" src="images/cumaru.jpg "width="110" height="119" alt="Cumaru" /></a>
                                            <h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Cumaru</h2>
                                        </table>
                                    </td>
                                    <td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" align="center" width="100%">
                                            <a href="http://www.walkgreenproducts.com/decking_garapa.html"><img class="emailwrap" src="images/garapa.jpg "width="110" height="119" alt="Gold Garapa" /></a>
                                            <h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Gold Garapa</h2>
                                        </table>
                                    </td>
                                    <td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" align="center" width="100%">
                                            <a href="http://www.walkgreenproducts.com/decking_espresso_garapa.html"><img class="emailwrap" src="images/espresso-garapa.jpg "width="110" height="119" alt="Espresso Garapa" /></a>
                                            <h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Espresso Garapa</h2>
                                        </table>
                                    </td>
                                    <td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" align="center" width="100%">
                                            <a href="http://www.walkgreenproducts.com/decking_tigerwood.html"><img class="emailwrap" src="images/tigerwood.jpg "width="110" height="119" alt="Tigerwood" /></a>
                                            <h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Tigerwood</h2>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- species content -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td>
                                        <h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">We Have Over 500,000 Lineal Ft. of stock on the ground at all times, ready for prompt shipment! </h2>

                                        <p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">WalkGreen&trade; maintains a philosophy of stewardship, product quality and client satisfaction by preserving forest ecology and forest-dependent communities while supporting responsible and legal forestry. WalkGreen&trade; remains competitively priced by holding the largest inventory of FSC&reg; Exotic Hardwood Decking and Rainscreen in North America. </p>

                                        <h2 class="emailh2"style="font-size:18px; font-family: Arial, sans-serif;">General Wood Specifications</h2>

                                        <p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">All wood is Export A grade, three side clear with minor defect down side.  Kiln Dried to 12-15% moisture content. S4S E4E unless milled to specification. Random length 7-18 ft, odds and evens. 100% FSC® Certified</p>

                                    </td>
                                </tr>
                            </table>
                            <!-- contact info -->
                            <table class="emailwrap" style="background-color:#fff; border-bottom: solid 1px #ccc;" cellpadding="0" cellspacing="0" width="600" align="center">
                                <tr>
                                    <td class="emailcolsplit" width="475" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding-top:12px; padding-bottom:12px;">
                                                    <h2 class="emailh2" style="font-size:15px; font-family: Arial, sans-serif; margin-top:0; margin-bottom:0;">Text</h2>

                                                </td>

                                            </tr>
                                        </table>
                                    </td>
                                    <td class="emailcolsplit" width="125" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding-top:12px; padding-bottom:12px;">
                                                <a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/facebook.gif" alt="Like us on Facebook" /></a>
                                                <a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/web-graphic.gif" alt="WalkGreen Products Website" /></a>
                                                <a style="margin-top:0; margin-bottom:0;" href="#"><img src="images/mail.gif" alt="Contact Us" /></a></p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>                           
                                </tr>
                            </table>
                            <!-- footer -->
                            <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
                                <tr>
                                    <td class="emailcolsplit" width="250" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding-top:20px; padding-bottom:20px; padding-right:20px;">
                                                    <a href="#"><img src="images/walkgreen.gif" alt="WalkGreen Products" /></a>

                                                </td>

                                            </tr>
                                        </table>
                                    </td>
                                    <td class="emailcolsplit" width="350" valign="top" align="center">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding-top:20px; padding-bottom:20px;">
                                                    <p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999;">IF YOU NO LONGER WISH TO RECEIVE EMAILS PLEASE <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a><br/>
                                                    &copy; 2015 WALKGREEN&trade; PRODUCTS, ALL RIGHTS RESERVED</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>                           
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>

【问题讨论】：

您能否接受答案，请点击我答案上的勾号按钮

标签： html css email responsive-design media-queries

【解决方案1】：

错误的媒体查询

您有错误的查询。即 iphone6 plus 是max-device-width : 736px，因此不满足后一个查询！见media-queries-for-standard-devices。

如果您想解决这个问题，您必须首先定义xs 的大小。仅仅说所有手机是不够的，因为有些手机的屏幕非常大，看起来像平板电脑！ Iphone 6 Plus 是大手机的典型例子。

如果我理解正确的话：

hidden-xs 应仅在特定屏幕宽度以下隐藏h2，其余部分可见
visible-xs 应仅在特定屏幕宽度以下显示 h2，其余部分隐藏

例如如果您将xs 定义为屏幕宽度<= 767px，那么您的CSS 应该是：

@media screen and (max-width: 767px) {
  /* styles for screen width <= 767px */
  h2[class=hidden-xs], ul[class=hidden-xs] {
     display: none;
  }

  h2[class=visible-xs], ul[class=visible-xs] {
     display: block;
  }
}

@media screen and (min-width: 768px) {
  /* screen width >= 768px */
  h2[class=hidden-xs], ul[class=hidden-xs] {
    display: block;
  }

  h2[class=visible-xs], ul[class=visible-xs] {
     display: none;
  }
}

或简化为（移动优先方法）：

h2[class=hidden-xs], ul[class=hidden-xs] {
  display: none;
}

h2[class=visible-xs], ul[class=visible-xs] {
   display: block;
}

@media screen and (min-width: 768px) {
    /* styles for screen width >= 768px */

  h2[class=hidden-xs], ul[class=hidden-xs] {
    display: block;
  }

  h2[class=visible-xs], ul[class=visible-xs] {
     display: none;
  }
}

或桌面优先方法

h2[class=hidden-xs], ul[class=hidden-xs] {
   display: block;
}

h2[class=visible-xs], ul[class=visible-xs] {
   display: none;
}

@media screen and (max-width: 767px) {
  /* styles for screen width <= 767px */
  h2[class=hidden-xs], ul[class=hidden-xs] {
     display: none;
  }

  h2[class=visible-xs], ul[class=visible-xs] {
     display: block;
  }
}

注意：!important 可能是不必要的

【讨论】：

该元标记存在于我的原始 html 文件中，我只是没有将它包含在我粘贴的源代码中。以下只是电子邮件爆炸中的一个 sn-p。
标题标签怎么样。您还可以减少代码，使其具有最少的代码但仍然存在问题，并编辑您的问题以反映此修复程序
我想我找到了问题所在。我编辑了我的答案。问题是没有任何查询正在运行！出于好奇，您使用的是什么 iPhone？
我已经粘贴了原始源代码。请再看一遍。
我还添加了一些代码来向您展示如何做到这一点

【解决方案2】：

您可以尝试创建一个类来隐藏手机上不会显示的元素

@media only screen and (min-width: 320px) and (max-width: 768px){
.hide_phone{display: none;}
}

【讨论】：