HTML Gmail на iPhone 6 сдвигает содержимое электронной почты вправо - PullRequest
Новая
       44

HTML Gmail на iPhone 6 сдвигает содержимое электронной почты вправо

0 голосов
/ 11 июня 2018

У меня та же проблема, на которую указал Космин Попович в этой теме https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios, где Gmail на iO, в частности на iPhone 6, толкает контент вправо и обрезает его примерно так:

enter image description here

Я попробовал предложенные исправления, добавив код CSS, предназначенный для div, который генерирует gmail, для тела, добавив класс в основную таблицу-обертку следующим образом: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">

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

        u ~ div .wrapper {min-width: 100vw;}
      }

    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;">

    <table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>

        </td>
      </tr>
    </table>

  </body>
 </html>

Но это не сработало для меня вообще.Кто-нибудь пробовал что-то еще, что сработало?

Вот мой код: 

<style>
    @media screen and (max-width: 480px) {
            u~div {
                min-width: 100vw;
            }
        }
</style>

 <body>
<table class="wrapper" width="98%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <table class="mobile-shell" width="750" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td width="750" style="font-family: Arial, Helvetica, sans-serif !important; font-size: 0pt; font-weight: normal; line-height: 0pt; margin: 0; min-width: 750px; padding: 0; width: 750px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                /** Content goes here **/
                                            </td>
                                        </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

1 Ответ

0 голосов
/ 13 июня 2018

У меня тоже была эта проблема, и я надеялся с помощью хака u ~ div .wrapper {min-width: 100vw;}, но я так и не смог исправить одновременно Gmail iOS и Android.

Я остановился на следующем коде для удаления правого желоба в приложении Gmail для iOS.Это немного многословно, но в Gmail электронное письмо должно доходить до края. 

<style>
    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
        .mobile-shell {
            min-width: 320px !important;
        }
    }
    /* iPhone 6, 6S, 7, 8, and X */
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
        .mobile-shell {
            min-width: 375px !important;
        }
    }
    /* iPhone 6+, 7+, and 8+ */
    @media only screen and (min-device-width: 414px) {
        .mobile-shell {
            min-width: 414px !important;
        }
    }
</style>

Создайте один из этих медиазапросов для каждого дополнительного размера области просмотра, который вы хотите исправить.

...