iPhone 3GS not filling screen (vs other models)

Greetings!

Wondering if anyone has seen anything like this in a responsive email layout. I've reproduced this on an actual iPhone 3GS I have here (running iOS 4.1).

The design fills the width on the other iPhones and elsewhere, but on the 3GS it's loading in a narrower width (it looks like 300px). I can't see anything in the code that pops out at me as imposing that constraint.

iPhone screenshots:
https://litmus.com/pub/f481579/screenshots

Email code:
http://www.morins.com/email/ppl.html

Thanks!

Mark

roshodgekiss roshodgekiss, 3 years ago

Hi Mark, this is so strange! It's very uncommon for us to see rendering differences between iPhone/iOS versions. Sadly we don't have a live 3GS to test on at present, but my first recommendation would be to see if a live test differs from the Litmus one.

My second tip is to experiment with viewport meta tags. For example:

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

I'll be sure to let you know if I think of anything else. Thanks, Mark - let us know how you go here.

PS: Can we feature your design in our gallery? :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
circa1977 circa1977, 3 years ago

Thanks for the tip, Ros! I was able to reproduce on an iPhone 3GS. I included the version of iOS in my original post.

I have not been setting viewport in HTML emails, though. I'll give that a shot tomorrow. My first thought was that the Litmus test was zoomed, but that's not the case on my device, and you can see the logo filling the width of the space the design is using – There should be spacers on either side.

Yes! You are welcome to feature this in the gallery once it's finished up! Here's another new design we did last week that I like, too: http://mailtools.dispatchwire.com/t/r-1734D1D571F208D92540EF23F30FEDED


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
roshodgekiss roshodgekiss, 3 years ago

Awesome - keep us updated. I'll pop you an email in just a moment, too :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
circa1977 circa1977, 3 years ago

OK - I tried setting the viewport tag -- Didn't work.

I then tried setting all my outer table cells, in the wrapper table, to be 100%. Everything is centered in one of these cells, whether nested tables or not. The logo was directly centered in one. Didn't work.

When I tested on the 3GS, it would load the background color full width, and then it seemed to snap the table width to that 300px wide logo. So instead of having the logo centered in the full-width background color cell, I nested a table with 20px spacer columns on the left and right, like the other cells.

That technically worked.

However, it revealed hairline gaps in background color between rows. I fixed most of those by setting a bgcolor on the table itself, though the bottom row with a different background color still does that a bit.

https://litmus.com/pub/b6854ce

Seems like it's still scaling something... But at this point, I'll take it!

Mark


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
circa1977 circa1977, 3 years ago

Gaps eliminated!

I was only sizing the logo down to 300px wide in my media queries, + 20px on the outsides = 340 instead of 320. I have that sizing down to 280 now.

Mark


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
roshodgekiss roshodgekiss, 3 years ago

Nicely done, Mark - I can't wait to see your design in our gallery! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098