那些遇到过的问题

为什么 Gmail 不响应媒体查询？

Kuy*_*nny 1 html gmail html-email media-queries responsive

StackOverflow 有什么好的？我长期以来一直试图弄清楚为什么 Gmail 没有接收我的 HTML 电子邮件的媒体查询。宽屏看起来不错，但 Gmail 不响应我手机的屏幕宽度，因此在手机上看起来很奇怪且有问题。

我已经尝试过查看类似的问题，甚至尝试重写我的 CSS 多次，看看媒体查询是否会接受哪怕是最小的更改。

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width ,initial-scale=1" />
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

    body {
      margin: 0;
      padding: 15px;
    }

    .center {
      text-align: center;
      margin: 0 auto;
    }

    .wrapper {
      width: 100%;
      table-layout: fixed;
    }

    .inner-wrapper {
      width: 100%;
      max-width: 670px;
      background: #554348;
      margin: 0 auto;
    }

    table {
      border-spacing: 0;
      font-family: sans-serif;
      color: #727f80;
    }

    .header-table {
      text-align: center;
      padding: 10px 0px 0 0;
    }

    .header-table .header {
      width: 100%;
      max-width: 610px;
      display: inline-block;
      background: #fff;
      border-top: 2px solid #E5C2C0;
      border-radius: 6px 6px 0 0;
      padding-bottom: 24px;
    }

    .header-table img {
      width: 75px;
      float: left;
      border: 2px solid #E5C2C0;
      border-radius: 6px 0 0 0;
      border-top: none;
    }

    .slogan {
      color: #000;
      font-size: 12px;
      margin-top: 124px;
      color: #7FC29B;
    }

    .slogan-hr {
      width: 25vh;
    }

    .outer-table {
      width: 100%;
      max-width: 670px;
      margin: 0 auto;
    }

    .outer-table img {
      width: 100%;
      max-width: 670px;
      height: auto;
    }

    td {
      padding: 0;
    }

    p {
      margin: 0;
    }

    a {
      color: #f1f1f1;
      text-decoration: none;
    }

    .main-table {
      width: 100%;
      max-width: 610px;
      margin: 0 auto;
      border-radius: 6px;
      margin-top: 25px;
      margin-bottom: 25px;
      background: #fff;
    }

    .three-column {
      width: 100%;
    }

    .three-column img {
      width: 120px;
    }

    .section {
      /* Change display to inline-block on mobile */
      width: 100%;
      display: inline-flex;
      margin-top: 15px;
      margin-left: 30px;
    }

    .section .pic-container {
      display: inline-block;
    }

    .section .desc-container {
      margin: auto;
    }

    .desc-container td {
      padding-bottom: 25px;
    }

    .desc-container .content {
      margin-top: 32px;
    }

    .desc-table p {
      margin-top: 5px;
      margin-bottom: 10px;
    }

    .desc-table .h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: #424B54;
    }

    .desc-table .price {
      font-size: 20px;
      font-family: 'Libre Baskerville', serif;
      color: #7FC29B;
    }

    .button-container {
      margin-right: 90px;
      margin-top: 65px;
      height: 35px;
    }

    .btn-holder {
      font-size: 25px;
      padding: 9px;
      border-radius: 25px;
      color: #fff;
      background: #4C4B63;
      text-decoration: none;
    }

    .outer-table-2 {
      width: 100%;
      max-width: 670px !important;
      background: #fff;
      border-top: 3px solid #D4F5F5;
      border-bottom: 3px solid #D4F5F5;
    }

    .call-to-action {
      width: 100%;
      max-width: 670px;
      text-align: center;
    }

    .cta-text {
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 30px;
      color: #4C4B63;
    }

    .cta-button {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .outer-table-3 {
      margin-top: 30px;
      width: 100%;
      max-width: 670px;
      background: #4C4B63;
      border-top: 2px solid #7FC29B;
      border-radius: 6px 6px 0 0;
    }

    .footer-table {
      width: 100%;
      margin-top: 32px;
    }

    .footer-header-table {
      width: 100%;
    }

    .footer-header {
      color: #fff;
      text-align: center;
    }

    .footer-header .heart {
      color: red;
    }

    .footer-logo-table {
      float: left;
    }

    .footer-logo {
      width: 67px;
    }

    .footer-social-table {
      width: 100%;
      text-align: center;
    }

    .social-list {
      display: inline-flex;
      list-style: none;
    }

    .social-list li {
      margin-left: 10px;
      margin-right: 10px;
    }

    .social-list img {
      width: 55px;
    }

    .footer-text-table {
      float: right;
      text-align: right;
      margin-top: 25px;
    }

    .footer {
      font-size: 12px;
      color: #fff;
    }

    .footer a {
      text-transform: uppercase;
      color: red;
    }

    @media only screen and (max-width:360px) {
      .cta-button .btn-holder {
        font-size: 18px !important;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list img {
        width: 50px;
      }
    }

    @media only screen and (max-width:768px) {
      .wrapper {
        overflow: hidden;
      }

      .section {
        display: inline-block;
        margin: 0;
        margin-top: 15px;
        text-align: center;
      }

      .pic .content {
        width: 100%;
      }

      .section .home {
        width: 65%;
      }



      .desc-container {
        width: 100%;
      }

      .desc-table {
        margin: 0 auto;
      }

      .desc-table .h3 {
        font-size: 20px;
      }

      .desc-table .price {
        font-size: 24px;
      }

      .size {
        font-size: 20px;
      }

      .section .button-container {
        margin-top: 25px;
        margin-bottom: 25px;
        width: 100%;
      }

      .button-container .button-table {
        margin: 0 auto;
        padding-bottom: 25px;
      }

      .outer-table-2 {
        width: 100%;
      }

      .cta-button .btn-holder {
        font-size: 23px;
      }

      .outer-table-3 {
        width: 100%;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list {
        padding: 0;
      }
    }
  </style>
</head>
Run Code Online (Sandbox Code Playgroud)

我认为这是因为 @media 屏幕，它必须是“@media only screen”或“@media (){...”，但这些都没有做任何事情。

我的预期（在网络浏览器上运行）与实际发生的情况（gmail 应用程序） 图像

这是整个代码的链接： JSFiddle

即使帮不上忙，也感谢您的阅读。

更新！！！
感谢 Digital_Frankenstein，我能够解决这个问题。我应该做的是!important在 CSS 上添加一些标签，特别是在媒体查询上。对于未来的 HTML 电子邮件开发人员，不要忘记这一点。因为这真的很重要。

小智 5

我花了一段时间来调试这个，逐节取出。我讨厌头脑中的默认样式。这使得调试变得更加困难，但每个人都有自己的想法，我知道很多人因为 Gmail 更新而转向这种方法。

要解决 Gmail 中的问题：

  1. 您需要将 !important 添加到所有媒体查询 CSS 中，以覆盖默认样式。
  2. 你的口号“hr”把一切都推出去了，因为它的基宽很大。在您的媒体查询中，我添加了 width:90%!important; 的覆盖。
  3. 您需要减小最后一个按钮的字体大小。Gmail 中的分辨率为 23 像素。我建议也许20px？
  4. 您的页脚看起来不太好。如果你进一步摆弄的话最好，因为这两个项目都靠着边缘看起来不太好。

最后，如果您对这种技术不完全有信心，我建议您避免使用这种技术。我个人并不认为它有什么价值，因为 Gmail 开始呈现响应式代码，但我知道一些开发人员将它用于异常的移动电子邮件客户端，这是有道理的。但我坚持使用旧的学校表格，因为它可以正常工作，而且我的客户将管理模板。如果我总是可以更新和管理我构建的模板，那么这是有意义的。只是一些值得深思的东西。希望这能解决您的问题:)

  • 我添加了`!important`并且它起作用了！我还采纳了您的设计建议，并将底部徽标和页脚文本放在页脚区域的底部。太感谢了！你不知道你让我摆脱了多少压力。 (2认同)

归档时间：

查看次数：

12180 次

最近记录：

2 年，9 月 前
相关归档
CSS table-cell等宽 141
在div内仅包含两行内的文本 67
在悬停链接上更改bootstrap导航栏的颜色？ 56
HTML旁边标记与div标记 42
用于Scrollable窗格的纯Java HTML查看器/渲染器 35
Apple触控图标未显示在主屏幕上 30
尝试在屏幕中水平和垂直居中div 23
使用CSS在锚点内垂直对齐图像 18
仅在收到新邮件时才接收Gmail推送通知 8
在Phonegap中调整Android设备像素比率的问题 5
难疑归档
如何在提交前撤消'git add'？ 8567
如何从SQL Server中的SELECT更新？ 3546
需要一个没有任何子弹的无序列表 2408
在HTML5 localStorage中存储对象 2386
如何在Vim中进行不区分大小写的搜索 1579
如何在所有浏览器中控制网页缓存？ 1474
短路Array.forEach就像调用break 1429
如何通过curl调用使用HTTP请求发送标头？ 1328
如何让jQuery执行同步而非异步的Ajax请求？ 1173
你如何重命名Git标签？ 1162