Is there a method of turning off the Gmail App's Auto-resize feature in an email's layout?

问题

I'm laying out an email to be viewed across browsers and mobile platforms and mostly all is going well. It's laid out in tables, using inline styling etc. However, despite a media-query to the effect of a 600px max-width, the Gmail app on at least my and one other Android I have access to is opting to resize the images and layout to fit into it's area instead of using the media query or letting it fit itself into the window normally, either of which would be fine.

For personal use, I'm able to 'turn off auto-resize' on my phone, and then the email lays out as it would in a browser.

Is there a means to either tell the Gmail app not to auto-resize from the email size or to use the media query instead?

回答1:

As Google does itself (sic!) here you should add a small hack on top of your template, right after your <body> tag:

<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
<!-- /Gmail hack -->

Since Gmail and Inbox will ignore the display:none, the hack will affect only those two clients.

回答2:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;"). Everything will be laid out correctly, and it'll be scrollable.

Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.

回答3:

Inspired by css-tricks.com, this block of code solved my issue. Place it right before </body>.

<table class="gmail-app-fix">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
                <tr>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

(Tested with Gmail 6.0 and Inbox 1.20 on Android 5.0.1, resolution 720x1280 (works on both portrait and landscape orientation)).

回答4:

I just added style="min-width:290px;" to my outer most table, which is the smallest size my responsive emails view and its stopped moveong my blocks around and doesn't auto-resize. This means in Gmail App the email shows as a whole email.

来源：https://stackoverflow.com/questions/18388779/is-there-a-method-of-turning-off-the-gmail-apps-auto-resize-feature-in-an-email

标签

android

html

mobile

responsive-design

gmail