Gmail是否忽略媒體查詢？ -創建僅限移動設備的div

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 個解決方案

解決方案1
0 2016-07-11 10:59:03

Gmail是否忽略媒體查詢？ -創建僅限移動設備的div

問題描述

1 個解決方案

解決方案1 0 2016-07-11 10:59:03

解決方案1
0 2016-07-11 10:59:03