Question

我想让<div>仅在移动设备上显示。

我在<head>标记内：

<style>

@media only screen and (min-device-width: 481px) {
  div[class="mobile-only"] { 
    height: 0px !important;
    overflow: hidden !important;  
  } 
}

@media only screen and (max-device-width: 480px) {
  div[class="mobile-only"] { 
    height: auto !important;
    overflow: auto !important;
}

</style>

在HTML中：

<div class="mobile-only">
  <table...>
</div>

我尝试了大量（大致）不同的方法来实现这一点，例如display: none;但GMail似乎完全忽略了媒体查询并且无论如何都显示<div>。

这有诀窍吗？它适用于我的Outlook客户端。

Answer 1

您可以尝试以下操作：

HTML：

<div class="mobile-only" style="overflow:hidden; float:left; display:none; line-height:0px;"><br/>This is hidden on desktop!</div>

CSS：

@media only screen and (max-device-width: 480px) {
  *[class="mobile-only"] {
    overflow: visible !important;
    float: none !important;
    display: block !important;
    line-height:100% !important;
  }
}

正如html电子邮件中链接的答案样式中所提到的那样，应该内联设置。

Gmail忽略了媒体查询？ - 创建一个仅限移动设备的div

1 个答案: