I've recently been able to start regularly testing on an actual iPad instead of relying on the Litmus preview, and I discovered that the iOS mail app has huge margins on the left and right. These are clearly intentional, as all the emails in my box fit into that same sized area, but I wanted to see if there was anyway I could force an email to exceed these margins via my HTML/CSS.

Here is my use case:

Rendering in iPad Browser

This basic template is set up so that the images on the right will fall under the text to their left beginning at a reported width of 693 pixels. Seeing that the iPad's reported width is 768 pixels, I would imagine that I wouldn't see the images move until a screen smaller than 693 pixels is used, but here is what I am getting in the mail app with this same code:

Rendering in iOS Mail

The email is rendering in its mobile view, and it appears to be because the margins on the left and right are what are making it render this way. I would like to be able to allow the creative to expand into these margins, though I am starting to think this isn't possible. Here is what I have tried thusfar:

Adding this to my CSS
body{height:100% !important;margin:0 !important;padding:0 !important;width:100% !important;}

Adding this to my Head
<meta name="x-apple-disable-message-reformatting" />

I saw both of those solutions elsewhere for similar problems, but neither made a difference here. One obvious solution is that I can just make the max-width smaller on my media query, and that works fine for this particular creative, but not for other creatives I have set up, due to the scaling that occurs introducing some minor gaps in some areas. I'd rather just keep the larger max-size to eliminate horizontal scrolling for most users.

Any thoughts?