
1
Force Gmail App to Render Desktop Version
Good morning!
Has anyone done any research into how to get the Gmail app to render the desktop version?
We have tried methods like max-width, min-width, table-layout:fixed .etc but not success yet.
The percentage of gmail app opens as shown on the latest Litmus email is alarmingly high so we need to address it asap!
Thanks
I know you mentioned min-width already, but I use a spacer with min-width set, and it works for me to get rid of Gmail app’s text zoom.
I threw the mob-hide class in there in case your email is responsive (it sounds that way), and you need to hide the spacer on mobile devices that support media queries.
mob-hide class would be something like…
@media only screen and (max-width:481px) {
*[class="mob-hide"] { display: none !important }
}
Hope that helps.
Thanks for this Sean!
No problem :)
finally someone who's not confused! :) Great answer, this should work hehe
This is it! Thanks!
Goes perfect with this: <img src="spacer.gif" height="1px" width="600px" alt="" class="mob-hide" style="max-height:1px; min-height:1px; display:block; width:600px; min-width:600px;">
Thank you! That actually worked!
Sean- where do I put this code? I'm stuck on this.
@Maggie Ellis within the main container of your email. I normally put it in the very bottom. Make sure the width values are in sync.
In your internal styles:
.gmailFix, .gmailFix img { display:none !important; } /* Gmail App layout hack, pre-media query support */
<!-- main containing table-->
<table width="600" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr><td class="gmailFix">
<img src="spacer.gif" width="600" height="1" style="display:block;width:600px;min-width:600px;min-height:1px;max-height:1px;"/>
</tr></td>
</table>
Is it still possible to force the desktop version on the android app using the spacer gif hack?
Why would you want to? They support media queries now.
It will only work on the "vanilla" versions of Gmail, which are ones that never implemented media query support. So if you include it, it will force the desktop version on these vanilla gmail app versions while being ignored by the app versions that support media queries.
Try this:
Thank you so much for this! Worked like a charm!
Rasmus,
Thanks for this mate, i have been having an issue trying to get gmail app to render correctly - had already given up with it displaying the mobile version of my email, but it seems your hack has fixed it so it can render the desktop version correctly on mobile which is a good compromise here (and means getting client sign off is now possible!)...
I'm a bit confused by this as well; doesn't gmail strip or make the use of most of the media query useless?
Which confused me most. Usually get questions on how to get it working properly. Not disable it. :o
I'm a little late to this game, but just to clarify for other readers: The gmail app doesn't support responsive, this is a fix that tells the width of the column to be a certain width and stay that width. The only reason Sean has included a media query is to point out that if your email is responsive, you want the responsive version to ignore the width (for the obvious reason your email doesn't want to be 640px in mobile - 320 ideally). Basically how to tackle this situation without bugs in your responsive version)
Lastly this fix is because gmail use a viewport method and fails to acknowledge the widths especially when there is blank space.
I hope this helps anyone in future and that all my information is correct!
Gmail app doesn't work with media queries.
This is a great question I'd like to know the answer myself. I see the comment by Sean but I'm not sure how that applies. Could someone elaborate?
It just forces the layout to be 640px wide, therefore forcing the "desktop" layout. It worked for me. I coded it as the top row of my html email, changed the height to 1px, and hide it for all User Agents that support embedded CSS. For those that don't (such as Lotus Notes, which I have to support), I'm not able to discern the 1px of extra spacing at the top of my email.
etc etc.
I'm a little confused by your question. Since the app is being opened on mobile devices, wouldn't you want it to render the mobile-optimized view?
What Gmail app does is not mobile-optimized view - it's basically squishing the columns to fit the width of the screen making a mess...
I'm having problems with the rendering on orange.fr
Desktop view is showing fine one everything except orange.fr which is showing the mobile version.
Does anybody have a fix for this
If this MRM Meteorite account is still active, please contact me.
charles.hall@mrm-mccann.com